Question

我使用此方法在页面加载时使用JQuery填充选择字段

 $('#select').append('<option value="' + result + '">' + result + '</option>');

但是这会使选择框“空白”，即选项列表中的第一个值不会被预先选为选定选项。

如何“刷新”此列表以便预先选择第一个值？

抱歉 - 应该说之前是JQuery mobile

谢谢。

Answer 1

您可以将“selected”属性添加到您想要选择的选项元素中：

$('#select')
    .append('<option value="' + result + '" selected="selected">' + result + '</option>');

您没有指定如何使用循环准确填充选择元素，您可以这样做：

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);
}

<强> DEMO

所以你似乎正在使用jQuery Mobile，就像你在评论中所说的那样。

如果您使用的是selectmenu 小部件，则需要在对其内容/结构进行编程更改后以编程方式刷新：

$select.selectmenu("refresh", true);

<强> Documentation

Answer 2

您可以使用

$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');

Answer 3

只需..您可以随意设置值，即：$('#select').val(5); ..所以在您的情况下$('#select').val(result);

编辑：一个完整的工作示例包括：

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

Answer 4

添加新选项后，并非所有浏览器都会自动刷新。

对我有用的一个技巧是在向其添加新选项后隐藏并显示选择框。所以在你的情况下：

 $('#select').append('<option value="' + result + '">' + result + '</option>').hide().show();

至于选择正确的新添加选项，请按照：

 $('select').val(result);

Answer 5

Mohora Bogdan的答案仅起作用一次，然后，如果您选择其他选项，它将不再起作用。

为了使其可重用：

$('#select').prop('selected', false).find('option:first').prop('selected', true);

Answer 6

嗨，经过几番研究，我用这段代码解决了：

$('#select_id').empty();    
$('#select_id').append($('<option>',{text: 'pippo', value: 'pippo', selected: true}))
$('#select_id').change();

希望有帮助。

JQuery刷新选择框

6 个答案: