从动态创建的选项中设置选项“selected”属性

IT技术 javascript jquery select attributes option
2021-03-09 13:34:31

我有一个使用 javascript 函数动态创建的选择选项。选择的对象是

<select name="country" id="country">
</select>

当js函数执行时，“国家”对象是

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

并显示“印度尼西亚”作为默认选择的选项。注意：selected="selected"该选项中没有属性。

然后我需要将selected="selected"属性设置为“印度尼西亚”，我使用这个

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

使用萤火虫，我可以看到“印度尼西亚”选项是这样的

<option value="ID" selected="selected">Indonesia</option>

但它在 IE 中失败（在 IE 8 中测试）。

然后我尝试使用 jQuery 

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

它在 FFX 和 IE 中都失败了。

我需要“印度尼西亚”选项具有selected="selected"属性，因此当我单击重置按钮时，它将再次选择“印度尼西亚”。

更改 js 函数以动态创建“国家/地区”选项不是一种选择。该解决方案必须同时适用于 FFX 和 IE。

谢谢

6个回答

你想多了：

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
经过数小时的谷歌搜索，这终于为我解决了，非常感谢！！！
2021-05-05 13:34:31
这不是 OP 所要求的。OP 希望重置按钮起作用。
2021-05-11 13:34:31
好吧..这不是对所问内容的回应，但无论如何我都喜欢它，因为我正在寻找这种方法=）
2021-05-12 13:34:31
显然，从其他人所说的这与问题不符。然而，这正是我需要的，所以谢谢！
2021-05-21 13:34:31

好问题。您将需要修改 HTML 本身而不是依赖 DOM 属性。

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);

该代码抓住选项元素印尼，克隆它，并把它放到一个新的div（文档不是）来获取完整的HTML字符串：<option value="ID">Indonesia</option>。

然后它执行字符串替换以将属性添加selected="selected" 为字符串，然后用这个新选项替换原始选项。

我在 IE7 上测试过。在这里查看重置按钮是否正常工作：http : //jsfiddle.net/XmW49/

仅使用 javascript 的解决方案会更好
2021-05-14 13:34:31

而不是修改 HTML 本身，你应该只从相对选项元素中设置你想要的值：

$(function() {
    $("#country").val("ID");
});

在这种情况下，“ID”是选项“印度尼西亚”的值

这不会在选项选项卡内设置选定的 html 标签
2021-05-10 13:34:31
这应该为印度尼西亚正确设置： $("#country").val("ID");
2021-05-14 13:34:31

这么多错误的答案！

要指定表单字段在重置表单时应恢复的值，请使用以下属性：

  • 复选框或单选按钮： defaultChecked
  • 任何其他<input>控件：defaultValue
  • 下拉列表中的选项： defaultSelected

因此，要将当前选定的选项指定为默认值：

var country = document.getElementById("country");
country.options[country.selectedIndex].defaultSelected = true;

defaultSelected为每个选项设置值可能是一个好主意，以防以前设置过：

var country = document.getElementById("country");
for (var i = 0; i < country.options.length; i++) {
    country.options[i].defaultSelected = i == country.selectedIndex;
}

现在，当表单重置时，所选选项将是您指定的选项。

// get the OPTION we want selected
var $option = $('#SelectList').children('option[value="'+ id +'"]');
// and now set the option we want selected
$option.attr('selected', true);​​
更新了更现代解决方案的答案
2021-04-28 13:34:31
我正在寻找的解决方案！这有助于发现具有所需value的选项！谢谢你@corradio！
2021-05-12 13:34:31
应该是 var $opt = $('option[value='+ id +']'); $opt.attr('selected','selected');
2021-05-19 13:34:31
其它你可能感兴趣的问题
上一篇JavaScript 中的“闭包”究竟指的是什么？ 下一篇循环遍历 FileReader 的文件，输出始终包含循环中的最后一个值