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是這種行爲的原因。