JQuery 刷新选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9380709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery refresh select box
提问by user1202278
I am populating a select field using JQuery on page load using this method
我正在使用此方法在页面加载时使用 JQuery 填充选择字段
$('#select').append('<option value="' + result + '">' + result + '</option>');
However this leaves the select box 'blank', i.e the first value in the options list is not preselected as the selected option.
然而，这会使选择框“空白”，即选项列表中的第一个值不会被预选为所选选项。
How do I 'refresh' this list so that the first value is preselected?
如何“刷新”此列表以便预选第一个值？
Sorry - should have said it was JQuery mobile before
抱歉 - 之前应该说它是 JQuery mobile
Thank you.
谢谢你。
回答by Didier Ghys
You can add a "selected" attribute to the option element you'd like to be selected:
您可以将“selected”属性添加到您想要选择的选项元素：
$('#select')
.append('<option value="' + result + '" selected="selected">' + result + '</option>');
You don't specify how you populate exactly you select element, using a loop, you could do like this:
您没有指定如何使用循环准确填充您选择的元素，您可以这样做：
var data = ['a', 'b', 'c'];
var $select = $('#select'); // you might wanna empty it first with .empty()
for (var i = 0; i < data.length; i++) {
var o = $('<option/>', { value: data[i] })
.text(data[i])
.prop('selected', i == 0);
o.appendTo($select);
}?
So it seems you are using jQuery Mobile like you said in the comment.
因此，您似乎正在使用 jQuery Mobile，就像您在评论中所说的那样。
If you are using the selectmenu widget, you need to programmatically refresh after you make programmatic change to its content/structure:
如果您使用的是 selectmenu小部件，则需要在对其内容/结构进行编程更改后以编程方式刷新：
$select.selectmenu("refresh", true);
回答by Mohora Bogdan
You may use
您可以使用
$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');
回答by Ashraf
Simply .. you set the value whatever you want , i.e : $('#select').val(5);.. so in your case its $('#select').val(result);
简单地..你设置任何你想要的值，即：$('#select').val(5);..所以在你的情况下它$('#select').val(result);
Edit : a full working example included :
编辑：包括一个完整的工作示例：
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<select id='select'></select>
<br>
<input type=button onclick='addNew()' value='Add'>
<script>
function addNew()
{
var result = Math.floor(Math.random()*1000);
$('#select').append('<option value="' + result + '">' + result + '</option>');
$('#select').val(result);
}
</script>
?
?
回答by gintas
Not all browsers refresh select automatically after you add a new option.
添加新选项后，并非所有浏览器都会自动刷新选择。
One trick which works for me is hiding and showing the select box just after adding new options to it. So in your case:
对我有用的一个技巧是在添加新选项后隐藏和显示选择框。所以在你的情况下：
$('#select').append('<option value="' + result + '">' + result + '</option>').hide().show();
As for selecting the correct newly added option, follow with:
至于选择正确的新添加选项，请遵循：
$('select').val(result);
回答by Hooman
Mohora Bogdan's answer only works once, then if you select another option it doesn't work any more.
Mohora Bogdan的答案仅适用一次，然后如果您选择另一个选项，它将不再适用。
In order to make it reusable use :
为了使其可重复使用：
$('#select').prop('selected', false).find('option:first').prop('selected', true);
回答by marfing
Hi after several research, I solved with this piece of code:
嗨，经过多次研究，我用这段代码解决了：
$('#select_id').empty();
$('#select_id').append($('<option>',{text: 'pippo', value: 'pippo', selected: true}))
$('#select_id').change();
Hope it helps.
希望能帮助到你。
