从动态创建的选项中设置选项“选定”属性
Posted
技术标签:
【中文标题】从动态创建的选项中设置选项“选定”属性【英文标题】：set option "selected" attribute from dynamic created option 【发布时间】：2011-06-03 04:23:14 【问题描述】：我有一个使用 javascript 函数动态创建的选择选项。选择对象是
<select name="country" id="country">
</select>
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>
并显示“印度尼西亚”作为默认选择选项。注意：该选项中没有selected="selected" 属性。
然后我需要将selected="selected" 属性设置为“印度尼西亚”，我使用这个
var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");
使用firebug，我可以看到“印度尼西亚”选项是这样的
<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 中都有效。
谢谢
【问题讨论】：
【参考方案1】：你想多了：
var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
【讨论】：
这不是 OP 所要求的。 OP 希望重置按钮起作用。 嗯..这不是对所问内容的回应，但我还是喜欢它，因为我一直在寻找这种方法 =) 显然从其他人所说的这与问题不符。但是，这正是我所需要的，所以谢谢！ 经过数小时的谷歌搜索终于为我解决了这个问题，非常感谢！！！【参考方案2】：好问题。您将需要修改 html 本身，而不是依赖 DOM 属性。
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</option>。
然后它会进行字符串替换以添加属性selected="selected"作为字符串，然后用这个新选项替换原始选项。
我在 IE7 上测试过。在这里看到重置按钮正常工作：http://jsfiddle.net/XmW49/
【讨论】：
只有 JavaScript 的解决方案会更好【参考方案3】：与其修改 HTML 本身，不如从相关选项元素中设置所需的值：
$(function()
$("#country").val("ID");
);
在这种情况下，“ID”是选项“印度尼西亚”的值
【讨论】：
这不会在选项选项卡内设置选定的html标签 这应该为印度尼西亚正确设置：$("#country").val("ID");【参考方案4】：很多错误的答案！
要指定在重置表单时表单字段应恢复的值，请使用以下属性：
复选框或单选按钮：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;
现在，当表单被重置时，所选选项将是您指定的选项。
【讨论】：
【参考方案5】：// 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);
【讨论】：
应该是 var $opt = $('option[value='+ id +']'); $opt.attr('selected','selected'); 更新了对更现代解决方案的答案 我正在寻找的解决方案！这有助于发现具有所需价值的选项！谢谢你@corradio！【参考方案6】：你要做的是设置选择框的 selectedIndex 属性。
country.options.selectedIndex = index_of_indonesia;
更改 'selected' 属性通常在 IE 中不起作用。如果你真的想要你所描述的行为，我建议你编写一个自定义的 javascript 重置函数来将表单中的所有其他值重置为默认值。
【讨论】：
【参考方案7】：这适用于 FF、IE9
var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
【讨论】：
【参考方案8】：使选项默认选中
HTMLOptionElement.defaultSelected = true; // JS
$('selector').prop(defaultSelected: true); // jQuery
HTMLOptionElement MDN
如果 SELECT 元素已添加到文档中（静态或动态），则将选项设置为 Attribute-selected 并使其存活 HTMLFormElement.reset() - defaultSelected 是使用：
const EL_country = document.querySelector('#country');
EL_country.value = 'ID'; // Set SELECT value to 'ID' ("Indonesia")
EL_country.options[EL_country.selectedIndex].defaultSelected = true; // Add Attribute selected to Option Element
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="HR">Croatia</option>
<option value="ID">Indonesia</option>
<option value="ZW">Zimbabwe</option>
</select>
</form>如果您动态地构建选项，并且（仅在之后）您想将一个选项设置为defaultSelected，上述方法也将起作用。
const countries =
AF: 'Afghanistan',
AL: 'Albania',
HR: 'Croatia',
ID: 'Indonesia',
ZW: 'Zimbabwe',
;
const EL_country = document.querySelector('#country');
// (Bad example. Ideally use .createDocumentFragment() and .appendChild() methods)
EL_country.innerHTML = Object.keys(countries).reduce((str, key) => str += `<option value="$key">$countries[key]</option>`, '');
EL_country.value = 'ID';
EL_country.options[EL_country.selectedIndex].defaultSelected = true;
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country"></select>
</form>在动态创建选项时将选项设为默认选择
要创建一个选项 selected 在填充 SELECT 元素时，请使用 Option() constructor MDN
var optionElementReference = new Option(text, value, defaultSelected, selected);
const countries =
AF: 'Afghanistan',
AL: 'Albania',
HR: 'Croatia',
ID: 'Indonesia', // <<< make this one defaultSelected
ZW: 'Zimbabwe',
;
const EL_country = document.querySelector('#country');
const DF_options = document.createDocumentFragment();
Object.keys(countries).forEach(key =>
const isIndonesia = key === 'ID'; // Boolean
DF_options.appendChild(new Option(countries[key], key, isIndonesia, isIndonesia))
);
EL_country.appendChild(DF_options);
document.forms[0].reset(); // "Indonesia" is still selected<form>
<select name="country" id="country"></select>
</form>在上面的演示中，Document.createDocumentFragment 用于防止循环渲染 DOM 内的元素。相反，片段（包含所有选项）仅附加到 Select 一次。
SELECT.value vs. OPTION.setAttribute vs. OPTION.selected vs. OPTION.defaultSelected
虽然一些（较旧的）浏览器将 OPTION 的 selected 属性解释为 "string" 状态，但 WHATWG HTML Specifications html.spec.whatwg.org 表示它应该表示布尔值 selectedness em>
选项元素的选择是一个布尔状态，最初为假。除非另有说明，否则在创建元素时，如果元素具有 selected 属性，则必须将其选中状态设置为 true。html.spec.whatwg.org - Option selectedness
人们可以正确推断出<option value="foo" selected> 中的名称selected 就足以设置真实状态。
不同方法的对比测试
const EL_select = document.querySelector('#country');
const TPL_options = `
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="HR">Croatia</option>
<option value="ID">Indonesia</option>
<option value="ZW">Zimbabwe</option>
`;
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
const mutationCB = (mutationsList, observer) =>
mutationsList.forEach(mu =>
const EL = mu.target;
if (mu.type === 'attributes')
return console.log(`* Attribute $mu.attributeName Mutation. $EL.value($EL.text)`);
);
;
// (PREPARE SOME TEST FUNCTIONS)
const testOptionsSelectedByProperty = () =>
const test = 'OPTION with Property selected:';
try
const EL = [...EL_select.options].find(opt => opt.selected);
console.log(`$test $EL.value($EL.text) PropSelectedValue: $EL.selected`);
catch (e)
console.log(`$test NOT FOUND!`);
const testOptionsSelectedByAttribute = () =>
const test = 'OPTION with Attribute selected:'
try
const EL = [...EL_select.options].find(opt => opt.hasAttribute('selected'));
console.log(`$test $EL.value($EL.text) AttrSelectedValue: $EL.getAttribute('selected')`);
catch (e)
console.log(`$test NOT FOUND!`);
const testSelect = () =>
console.log(`SELECT value:$EL_select.value selectedIndex:$EL_select.selectedIndex`);
const formReset = () =>
EL_select.value = '';
EL_select.innerHTML = TPL_options;
// Attach MutationObserver to every Option to track if Attribute will change
[...EL_select.options].forEach(EL_option =>
const observer = new MutationObserver(mutationCB);
observer.observe(EL_option, attributes: true);
);
// -----------
// LET'S TEST!
console.log('\n1. Set SELECT value');
formReset();
EL_select.value = 'AL'; // Constatation: MutationObserver did NOT triggered!!!!
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n2. Set HTMLElement.setAttribute()');
formReset();
EL_select.options[2].setAttribute('selected', true); // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n3. Set HTMLOptionElement.defaultSelected');
formReset();
EL_select.options[3].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
console.log('\n4. Set SELECT value and HTMLOptionElement.defaultSelected');
formReset();
EL_select.value = 'ZW'
EL_select.options[EL_select.selectedIndex].defaultSelected = true; // MutationObserver triggers
testOptionsSelectedByProperty();
testOptionsSelectedByAttribute();
testSelect();
/* END */
console.log('\n*. Getting MutationObservers out from call-stack...');<form>
<select name="country" id="country"></select>
</form>虽然测试2.使用.setAttribute()起初似乎是最好的解决方案，因为元素属性和属性是一致的，它可能导致混乱，特别是因为.setAttribute 需要两个参数：
EL_select.options[1].setAttribute('selected', false);
// <option value="AL" selected="false"> // But still selected!
实际上会使选项选中
应该将.removeAttribute() 或.setAttribute('selected', ???) 用于另一个值吗？还是应该使用.getAttribute('selected') 或.hasAttribute('selected') 来读取状态？
使用defaultSelected 代替测试 3.（和 4.）给出了预期结果：
selected 作为一个命名的选择状态。
属性 selected 在元素对象上，具有布尔值。
【讨论】：
【参考方案9】：select = document.getElementById('selectId');
var opt = document.createElement('option');
opt.value = 'value';
opt.innerHTML = 'name';
opt.selected = true;
select.appendChild(opt);
【讨论】：
看起来更简单且有效【参考方案10】：// 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;
贝吉图罗。
【讨论】：
bukan gitu maksud saya mas, pas loading Indonesia memang dah ter-select, jd di Indonesia itu harus ada tambahan attribute selected="selected", gunanya kalo optionnya dipindahin ke negara lain trus click reset, nanti balik lg ke 印度尼西亚 :D Ma'af saya bule jadi tidak lancar banget，jadi mungkin pake Bahasa Inggris saja。 :P @Sam katanya 属性 itu cuma untuk HTML, kalo Javascript lain lagi, pakeselectedIndex.
selected='selected' 属性通常仅适用于 HTML 代码。如果你想使用 Javascript 来做到这一点，你应该使用selectedIndex。否则，你可以试试obj.setAttribute("selected","selected")。
这里的for循环应该是：for(i=0;i这应该可行。
$("#country [value='ID']").attr("selected","selected");
如果你有绑定到元素的函数调用，只需在它后面加上类似
的东西$("#country").change();
【讨论】：
【参考方案12】：您可以搜索所有选项值，直到找到正确的值。
var defaultVal = "Country";
$("#select").find("option").each(function ()
if ($(this).val() == defaultVal)
$(this).prop("selected", "selected");
);
【讨论】：
【参考方案13】：要在运行时设置输入选项，请尝试设置“checked”值。 （即使不是复选框）
elem.checked=true;
其中 elem 是对要选择的选项的引用。
所以对于上述问题：
var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;
这对我有用，即使选项没有包含在 .
如果所有标签都同名，则在选中新标签时应取消选中。
【讨论】：
【参考方案14】：意识到这是一个老问题，但使用较新版本的 JQuery，您现在可以执行以下操作：
$("option[val=ID]").prop("selected",true);
这与 Box9 在一行中选择的答案相同。
【讨论】：
这是option[value=ID] 而不是option[val=ID]。【参考方案15】：
此页面上的想法很有帮助，但与以往一样，我的情况有所不同。所以，在 modal bootstrap / express node js / aws beanstalk 中，这对我有用：
var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");
我的select ID = "cJourney" 和下拉值存储在变量中：vcJourney
【讨论】：
【参考方案16】：原版JS
将此用于 Vanilla Javascript，请记住，您可以将来自 fetch 函数的任何数据（例如）提供给示例“数字”数组。
初始 HTML 代码：
<label for="the_selection">
<select name="the_selection" id="the_selection_id">
<!-- Empty Selection -->
</select>
</label>
一些值select标签：
const selectionList = document.getElementById('the_selection_id');
const numbers = ['1','3','5'];
numbers.forEach(number =>
const someOption = document.createElement('option');
someOption.setAttribute('value', number);
someOption.innerText = number;
if (number == '3') someOption.defaultSelected = true;
selectionList.appendChild(someOption);
)
你会得到：
<label for="the_selection">
<select name="the_selection" id="the_selection_id">
<!-- Empty Selection -->
<option value="1">1</option>
<option value="3" selected>3</option>
<option value="5">5</option>
</select>
</label>
【讨论】：
【参考方案17】：我正在尝试使用 $(...).val() 函数进行类似的操作，但该函数不存在。事实证明，您可以像为<input> 一样手动设置值：
// Set value to Indonesia ("ID"):
$('#country').value = 'ID'
...它会在选择中自动更新。至少可以在 Firefox 上运行；您可能想在其他人身上尝试一下。
【讨论】：
【参考方案18】：使用 set 属性在 JavaScript 中设置值，用于选定的选项标签
var newvalue = 10;
var x = document.getElementById("optionid").selectedIndex;
document.getElementById("optionid")[x].setAttribute('value', newvalue);
【讨论】：
请在您的答案中添加一些解释，以便其他人可以从中学习 使用 set 属性在 JavaScript 中设置值，用于选定的选项标签以上是关于从动态创建的选项中设置选项“选定”属性的主要内容，如果未能解决你的问题，请参考以下文章
如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组
提交更新后 select2 的选择选项丢失以及如何从数据库中设置选定的值