Question

我有一个列表（<select>），我以编程方式更改其中一个项目的文本。当我打开列表时，我可以看到该项目已更改，但列表仍显示旧文本。

<select id="myList">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>
<input type="button" value="Change" onclick="changeText();">

function changeText()
{ 
    $("#myList option:selected").text("new Item Text");
}

即：我选择＆＃34;项目2＆＃34;，然后按下按钮＆＃34;更改＆＃34;。现在列表中有3个元素（＆＃34;项目1＆＃34;，＆＃34;新项目文本＆＃34;＆＃34;项目3＆＃34;），但它仍然显示＆＃34;项目2＆＃ 34 ;.我发现更新它的唯一方法是选择另一个元素，然后更改一个元素，尽管因为与DB的连接而不可行...

我做错了什么或我能做些什么来解决这个问题？

Answer 1

好的，你正在使用jquery mobile，它应用自己的样式并在另一个元素中显示所选的值。

您需要在change上触发select事件，以便jquery-mobile选择它并更新相关的显示字段。

$("#myList option:selected").text("new Item Text").trigger('change');

使用jquery mobile进行演示：http://jsfiddle.net/gaby/z84ck1bc/1/

更新感谢@ Omar的评论

正确的做法是在selectmenu上调用refresh method。

$("#myList option:selected").text("new Item Text");
$('#myList').selectmenu('refresh');

Answer 2

我检查它在jquery版本下工作正常：

的jquery-1.9.1.js

我正在使用以下代码：

<select id="myList">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>
<input type="button" value="Change" onclick="changeText();">

<script type="text/javascript">
    function changeText() {
        $("#myList option:selected").text("new Item Text");
    };
</script>

当使用JQuery更改项目时，如何更新列表中显示的文本

2 个答案: