javascript - 在jQueryMobile框架下的select选择框元素,想要动态变更选中项时发现变更不了,请问有什么好办法解决吗?
大家讲道理
大家讲道理 2017-04-11 12:20:15
0
1
269

按正常的方法:

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,引入它们的库进来只是纯粹起到套用其外观样式的作用)。故想请问各位大侠,这种情况有没有什么更好的解决办法吗?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(1)
Ty80

一般来说是这样:

$('#selectId').val('select_value');
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!