设置选项“已选择"；来自动态创建选项的属性

2022-01-13 00:00:00 select attributes jquery javascript option

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

I have a dynamically created select option using a javascript function. the select object is

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

js函数执行时，country"对象为

when the js function is executed, the "country" object is

<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" 属性.

and displaying "Indonesia" as default selected option. note : there is no selected="selected" attribute in that option.

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

then I need to set selected="selected" attribute to "Indonesia", and I use this 

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

使用firebug，我可以看到印度尼西亚"选项是这样的

using firebug, I can see the "Indonesia" option is like this

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

但它在 IE 中失败(在 IE 8 中测试).

but it fails in IE (tested in IE 8).

然后我尝试使用 jQuery

and then I have tried using jQuery 

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

在 FFX 和 IE 中都失败了.

it fails both in FFX and IE.

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

I need the "Indonesia" option to have selected="selected" attribute so when I click reset button, it will select "Indonesia" again.

更改 js 函数以动态创建国家/地区"选项不是一种选择.该解决方案必须在 FFX 和 IE 中都有效.

changing the js function to dynamically create "country" options is not an option. the solution must work both in FFX and IE.

谢谢

推荐答案

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

Good question. You will need to modify the HTML itself rather than rely on DOM properties.

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

代码抓取印度尼西亚的 option 元素，将其克隆并放入新的 div(不在文档中)以检索完整的 HTML 字符串:<option value="ID">Indonesia</选项>.

The code grabs the option element for Indonesia, clones it and puts it into a new div (not in the document) to retrieve the full HTML string: <option value="ID">Indonesia</option>.

然后它会进行字符串替换以添加属性 selected="selected" 作为字符串，然后用这个新选项替换原始选项.

It then does a string replace to add the attribute selected="selected" as a string, before replacing the original option with this new one.

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

I tested it on IE7. See it with the reset button working properly here: http://jsfiddle.net/XmW49/

相关文章