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

Question

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

可以在Ajax调用之后完全重新初始化Widget，该调用返回select的html，其中应用了afterwords小部件。

问题是在窗口小部件初始化后，未选择实际选择的选择选项。

调试时我从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

我发现了原因。

我在小部件被销毁并重新初始化之前设置了选择值。

所以发生的事件是这样的：

// 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')）进行查询，这是导致此类行为的原因。