按正常的方法:
select1.selectedIndex = i;
不能奏效。而且现象很奇特:下拉列表中的项是选中了,但选框标题却没变。
经查看浏览器DOM树,发现<select>元素已经被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>元素前面被添加了一个<span>作为选框标题。原因也正在于此。选中项动态变更了,然而<span>的内容却没有自动随之变更,故造成标题仍然不变的怪象。
实在找不到什么好办法,最后只得加了一行硬改<span>内容的语句:
select1.previousSibling.innerHTML = select1.options[i].text;
经实验,这方法可以解决问题。但总觉得这种硬改的办法不像是好办法(我不熟悉jQuery和jQueryMobile,引入它们的库进来只是纯粹起到套用其外观样式的作用)。故想请问各位大侠,这种情况有没有什么更好的解决办法吗?
一般来说是这样: