jQuery不返回实际的选择选项属性

Question

我有一个jQuery UI选择小部件。

在Ajax调用之后，可以完全重新初始化Widget，该Ajax调用返回应用了后缀Widget的select的html。

问题是，小部件初始化后，没有选择实际选择的选择选项。

调试时我发现了以下的Chrome DevTools控制台输出：

> thisWidget.element 
[<select name=​"main.model" id=​"ui-id-297" style=​"display:​ none;​">​<option selected=​"selected" value>​ Choose ​</option>​<option value=​"express">​ Express ​</option>​</select>​] 

> thisWidget.element.find('option') 
[<option selected=​"selected" value>​ Choose ​</option>​, <option value=​"express">​ Express ​</option>​] 

> thisWidget.element.find('option:selected') 
[] 

> thisWidget.element.find("option[value='']") 
[<option selected=​"selected" value>​ Choose ​</option>​] 

> thisWidget.element.find("option[value='']:selected") 
[] 

当我看到它在哪个小部件被初始化是正确的HTML，但随着空值的选项未尽管它选择应该。

为什么我得到这种行为？

Answer 1

我发现了原因。

在widget被销毁并重新初始化之前，我正在设置选择值。

所以事件存在的是这样的：

// getting re-rendered html select through ajax call 
mySelect.val('foo') // setting the value of select which in fact may not have option with such value 
// ...then destroy event occurs 
// ... and then widget is reinitiazlied 

因此可能与未销毁的小部件和值设置（mySelect.val('foo')）interlieving是这种行为的原因。