JQuery刷新下拉框

Question

JQuery刷新下拉框

14

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

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

然而，这会使选择框“空白”，也就是说，选项列表中的第一个值未被预先选定为所选选项。

如何“刷新”此列表以使第一个值被预先选定？

- user1202278

7个回答

5

您可以使用

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

- Mohora Bogdan

也许这是 JQuery 移动表单选择字段的问题，因为这些示例中没有一个预先选择值，在 iPhone 上查看选择时会有一个蓝色勾号指示所选值，但在加载时选择框是白色的。非常奇怪。 - user1202278

4

简单地说，您可以设置任何想要的值，例如：$('#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>

- Ashraf

很抱歉，这并没有解决问题，预选选项仍然为空 :( - user1202278

也许这是 JQuery 移动表单选择字段的问题，因为这些示例中没有一个预先选择值，在 iPhone 上查看选择时会有一个蓝色勾号指示所选值，但在加载时选择框是白色的。非常奇怪。 - user1202278

4

你好，在经过一些研究之后，我用了这段代码解决了问题：

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

希望这有所帮助。

- marfing

1

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

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

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

关于选择正确的新添加选项，请按照以下步骤进行：

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

- gintas

1

Mohora Bogdan的答案只能用一次，如果选择另一个选项，它就无法继续工作。

为了使其可重复使用，请使用：

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

- Hooman

0

$('#ControlIDHere').val('YourValueHere');
$('#ControlIDHere').change();

- onyangofred

1

感谢您对Stack Overflow社区做出贡献的兴趣。这个问题已经有了一些答案，其中包括一个已经得到社区合理验证的答案。您确定您的方法之前没有被提出过吗？如果是这样的话，解释一下您的方法与之前的方法有何不同，您的方法在什么情况下可能更好，以及为什么您认为之前的答案不够满意，这将非常有帮助。您能否友好地编辑您的答案并提供解释？ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Didier Ghys · Accepted Answer

你可以给你想要选择的选项元素添加一个 "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);
}

演示

看起来您正在像您在评论中所说的那样使用jQuery Mobile。

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

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

文档