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

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

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

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

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

当执行js函数时，“country”对象为

<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>

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

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

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

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

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

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

使用firebug，我可以看到“Indonesia”选项是这样的

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

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

但是它在IE中失败了(在ie8中测试过)。

and then I have tried using jQuery

然后我尝试使用jQuery

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

it fails both in FFX and IE.

它在FFX和IE都失败了。

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

我需要“印度尼西亚”选项来选择=“选择”属性，所以当我点击重置按钮时，它会再次选择“印度尼西亚”。

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

将js函数更改为动态创建“国家”选项不是一个选项。该解决方案必须在FFX和IE中都有效。

thank you

谢谢你！

14 个解决方案

#1

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

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

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

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>.

代码获取印度尼西亚的选项元素，克隆它并将其放入一个新的div(不在文档中)来检索完整的HTML字符串:。

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

然后，它执行一个字符串替换，将选中的属性=“selected”作为字符串，然后用这个新选项替换原来的选项。

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

我在IE7上测试过。这里的reset按钮是http://jsfiddle.net/XmW49/

#2

You're overthinking it:

你对这事太多心了:

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

#3

Instead of modify the HTML itself you should just set the value you want an select element:

与其修改HTML本身，不如设置一个选择元素的值:

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

#4

// 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);

#5

What you want to do is set the selectedIndex attribute of the select box.

您要做的是设置select框的selectedIndex属性。

country.options.selectedIndex = index_of_indonesia;

Changing the 'selected' attribute will generally not work in IE. If you really want the behavior you're describing, I suggest you write a custom javascript reset function to reset all the other values in the form to their default.

更改“选择”属性通常不会在IE中工作。如果您真的想要描述的行为，我建议您编写一个定制的javascript重置函数，将表单中的所有其他值重置为默认值。

#6

This works in FF, IE9

这在FF, IE9中是有效的

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");

#7

So many wrong answers!

很多错误的答案!

To specify the value that a form field should revert to upon resetting the form, use the following properties:

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

Checkbox or radio button: defaultChecked
复选框或单选按钮:默认选中
Any other <input> control: defaultValue
任何其他 <输入> 控件:defaultValue。
Option in a drop down list: defaultSelected
下拉列表中的选项:defaultSelected

So, to specify the currently selected option as the default:

因此，指定当前选择的选项为默认值:

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

It may be a good idea to set the defaultSelected value for every option, in case one had previously been set:

为每个选项设置defaultSelected值可能是一个好主意，如果之前已经设置了一个选项:

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

Now, when the form is reset, the selected option will be the one you specified.

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

#8

// Get <select> object
var sel = $('country');

// Loop through and look for value match, then break
for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }

// Select index 
sel.options.selectedIndex = i;

Begitu loh.

Begitu loh。

#9

You could search all the option values until it finds the correct one.

您可以搜索所有的选项值，直到找到正确的值。

var defaultVal = "Country";
$("#select").find("option").each(function () {

    if ($(this).val() == defaultVal) {

        $(this).prop("selected", "selected");
    }
});

#10

This should work.

这应该工作。

$("#country [value='ID']").attr("selected","selected");

If you have function calls bound to the element just follow it with something like

如果有绑定到元素的函数调用，可以使用类似的方法

$("#country").change();

#11

Realize this is an old question, but with the newer version of JQuery you can now do the following:

意识到这是一个老问题，但是使用最新版本的JQuery，您可以执行以下操作:

$("option[val=ID]").prop("selected",true);

This accomplishes the same thing as Box9's selected answer in one line.

这与Box9在一行中选择的答案相同。

#12

select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);

#13

To set the input option at run time try setting the 'checked' value. (even if it isn't a checkbox)

要在运行时设置输入选项，请尝试设置“已检查”值。(即使它不是复选框)

elem.checked=true;

Where elem is a reference to the option to be selected.

其中elem是要选择的选项的引用。

So for the above issue:

因此，对于上述问题:

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

This works for me, even when the options are not wrapped in a .

这对我来说是可行的，即使选项没有包含在a中。

If all of the tags share the same name, they should uncheck when the new one is checked.

如果所有标记共享相同的名称，那么在检查新标记时应该取消检查。

#14

I was trying something like this using the $(...).val() function, but the function did not exist. It turns out that you can manually set the value the same way you do it for an <input>:

我使用$(…).val()函数尝试了类似的操作，但该函数并不存在。结果是，您可以手动设置值，就像您对那样:

// Set value to Indonesia ("ID"):
$('#country').value = 'ID'

...and it get's automatically updated in the select. Works on Firefox at least; you might want to try it out in the others.

…它在select中自动更新。至少适用于Firefox;你可能想在其他的地方试试。

#1