在任何位置使用jquery添加选项时如何添加“选定”属性
在任何位置使用jquery添加选项时如何添加“选定”属性
提问于 2018-04-24 23:33:45
我想在第三个位置添加“选定的”属性。您能解释一下我是否可以在jquery的append()中添加选定的属性。
for (i = 0; i < 10; i++)
{
if(i==3)
{
$('#mySelect').append($('<option>',
{
value: i,
text :i
}));
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-04-25 00:11:45
编辑:根据Rory McCrossan的评论(添加了append()和jQuery对象)更正答案，并为误导性道歉。
问题在于if语句，您的代码只会追加一个<option>，即如果i等于3。
jQuery API文档
根据文档，你有几种选择.
1)将append()与jQuery对象结合使用
for (var i = 0; i < 10; i++) {
$('#mySelect').append($('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
}))
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>
2)使用appendTo()
for (var i = 0; i < 10; i++) {
$('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
}).appendTo($('#mySelect'))
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>
3)将append()与方法结合使用
for (var i = 0; i < 10; i++) {
$('#mySelect').append(CreateOption(i))
}
function CreateOption(i) {
return $('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
})
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>
4)在文本中使用append()
for (var i = 0; i < 10; i++) {
var selected = i==3 ? ' selected=true' : ''
var option = '<option value='+ i + selected + '>' + i + '</option>'
$('#mySelect').append(option)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>
Stack Overflow用户
发布于 2018-04-24 23:59:02
怎么样
$('#mySelect :nth-child(3)').attr('selected', 'selected');Stack Overflow用户
发布于 2018-05-04 14:27:33
这个问题是因为嵌套的if语句，它只导致option的值3被附加到select。
要解决这个问题，您可以将所有option元素附加到一起，然后设置val() of select以选择所需的特定元素。试试这个：
var html = [];
for (i = 0; i < 10; i++) {
html.push($('<option>', {
value: i,
text: i
}));
}
$('#mySelect').append(html).val(3);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect"></select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50012059
复制相关文章
相似问题
腾讯云开发者
