请问在jQueryMobile框架下的select选择框元素，想要动态变更选中项时发现：下拉列表中的项是选中了，但选框标题却没变。除硬改外有什么好办法解决吗？

zhoupc88 2016-08-24 01:39:36

按正常的方法：

select1.selectedIndex = i;

不能奏效。而且现象很奇特：下拉列表中的项是选中了，但选框标题却没变。
经查看浏览器DOM树，发现<select>元素已经被jQueryMobile库改造，添加了一些<div>和<span>，变成了这样：



<div class="ui-select">

    <div 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>

    </div>

</div>

<select>元素前面被添加了一个<span>作为选框标题。原因也正在于此。选中项动态变更了，然而<span>的内容却没有自动随之变更，故造成标题仍然不变的怪象。
实在找不到什么好办法，最后只得加了一行硬改<span>内容的语句：

select1.previousSibling.innerHTML = select1.options[i].text;

经实验，这方法可以解决问题。但总觉得这种硬改的办法不像是好办法（我不熟悉jQuery和jQueryMobile，引入它们的库进来只是纯粹起到套用其外观样式的作用）。故想请问各位大侠，这种情况有没有什么更好的解决办法吗？

...全文

179 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhoupc88 2016-08-24

打赏
举报

引用 3 楼 Return_false 的回复:


<script>
$(function(){
	//以下为选中值为3的选项,设置完毕后需要刷新
	$('#select-native-1').val(3).selectmenu('refresh', true);   
})
</script>

是的，解决问题了，非常感谢！

人生难得一只鸡 2016-08-24

打赏
举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function(){
	//以下为选中值为3的选项,设置完毕后需要刷新
	$('#select-native-1').val(3).selectmenu('refresh', true);   
})
</script>
</head>

<body>
<div class="ui-field-contain">
    <label for="select-native-1">Basic:</label>
    <select name="select-native-1" id="select-native-1">
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
    </select>
</div>
</body>
</html>

zhoupc88 2016-08-24