JQuery 刷新选择框答案

【问题标题】：JQuery refresh select boxJQuery 刷新选择框
【发布时间】：2012-03-11 22:47:04
【问题描述】：

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

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

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

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

抱歉 - 之前应该说它是 JQuery 移动版

谢谢。

【问题讨论】：

标签： jquery select jquery-mobile option

【解决方案1】：

只需 .. 设置任何你想要的值，即：$('#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>

【讨论】：

恐怕这没有解决它，仍然是空的预选选项:(
也许这是 JQuery 移动表单选择字段的问题，因为这些示例都没有预先选择一个值，是的（例如在 iPhone 上，当您查看选择时有一个蓝色在所选值旁边打勾），但在加载时，选择框是白色的。很奇怪。

【解决方案2】：

你可以为你想要被选中的选项元素添加一个“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，就像您在评论中所说的那样。

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

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

Documentation

【讨论】：

也许这是 JQuery 移动表单选择字段的问题，因为这些示例都没有预先选择一个值，是的（例如在 iPhone 上，当您查看选择时，有一个蓝色在所选值旁边打勾），但在加载时，选择框是白色的。很奇怪。
您应该指定您使用的是jquery mobile，这是非常重要的信息！您在使用选择菜单小部件吗？
@DidierGhys DEMO fiddle 对我不起作用，它只是说该页面不存在。

【解决方案3】：

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

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

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

至于选择正确的新添加选项，请遵循：

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

【讨论】：

【解决方案4】：

你可以使用

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

【讨论】：

也许这是 JQuery 移动表单选择字段的问题，因为这些示例都没有预先选择一个值，是的（例如在 iPhone 上，当您查看选择时，有一个蓝色在所选值旁边打勾），但在加载时，选择框是白色的。很奇怪。

【解决方案5】：

Mohora Bogdan 的答案只有效一次，然后如果您选择另一个选项，它将不再有效。

为了使其可重复使用：

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

【讨论】：

【解决方案6】：

您好，经过多次研究，我用这段代码解决了：

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

希望对你有帮助。

【讨论】：