按正常的方法:
select1.selectedIndex = i;
不能奏效。而且現(xiàn)象很奇特:下拉列表中的項(xiàng)是選中了,但選框標(biāo)題卻沒變。
經(jīng)查看瀏覽器DOM樹,發(fā)現(xiàn)<select>元素已經(jīng)被jQueryMobile庫改造,添加了一些<p>和<span>,變成了這樣:
<p class="ui-select">
<p id="select1-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow ui-first-child">
<span>text2</span>
<select id="select1">
<option value="value1">text1</option>
<option value="value2">text2</option>
<option value="value3">text3</option>
</select>
</p>
</p>
<select>元素前面被添加了一個(gè)<span>作為選框標(biāo)題。原因也正在于此。選中項(xiàng)動(dòng)態(tài)變更了,然而<span>的內(nèi)容卻沒有自動(dòng)隨之變更,故造成標(biāo)題仍然不變的怪象。
實(shí)在找不到什么好辦法,最后只得加了一行硬改<span>內(nèi)容的語句:
select1.previousSibling.innerHTML = select1.options[i].text;
經(jīng)實(shí)驗(yàn),這方法可以解決問題。但總覺得這種硬改的辦法不像是好辦法(我不熟悉jQuery和jQueryMobile,引入它們的庫進(jìn)來只是純粹起到套用其外觀樣式的作用)。故想請問各位大俠,這種情況有沒有什么更好的解決辦法嗎?
光陰似箭催人老,日月如移越少年。