将选项设为defaultSelected

Question

我使用javascript函数动态创建了select选项。选择对象是

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

并显示“Indonesia”作为默认选择选项。注意：该选项中没有selected="selected"属性。

然后我需要将selected="selected"属性设置为“Indonesia”，我使用此

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

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

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

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

然后我尝试使用jQuery

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

在FFX和IE中都失败了。

我需要“Indonesia”选项才能拥有selected="selected"属性，所以当我点击重置按钮时，它会再次选择“Indonesia”。

更改js功能以动态创建“country”选项不是一种选择。解决方案必须在FFX和IE中都有效。

谢谢

Answer 1

你是在思考它：

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

Answer 2

好问题。您需要修改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/

Answer 3

您应该只设置想要选择元素的值，而不是修改HTML本身：

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

Answer 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;
}

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

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

Answer 6

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

country.options.selectedIndex = index_of_indonesia;

更改'selected'属性通常不适用于IE。如果确实想要您正在描述的行为，我建议您编写一个自定义的javascript重置函数，将表单中的所有其他值重置为默认值。

Answer 7

这适用于FF，IE9

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

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

Answer 9

将选项设为defaultSelected

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，以上内容同样适用。 / p>

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>

将选项设为默认值动态创建选项时选中

要在填充SELECT元素时选择一个selected ，请使用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.value vs。 OPTION.setAttribute vs。 OPTION.selected vs。 OPTION.defaultSelected

尽管某些（较旧的）浏览器将OPTION的selected属性解释为“ string” 状态，但WHATWG HTML Specifications ^{html.spec.whatwg.org}状态则应表示布尔值选择

选项元素的选择状态为布尔状态，最初为false。除非另有说明，否则在创建元素时，如果元素具有selected属性，则必须将其选择设置为true。
^{html.spec.whatwg.org - Option selectedness}

可以正确推断出selected中的名称<option value="foo" 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>

尽管起初使用.setAttribute()的 test 2 似乎是最好的解决方案，因为元素属性和属性都是一致的，但它会引起混淆，特别是因为.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，具有布尔值。

Answer 10

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

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

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

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

Answer 11

<div id="target" style="  width: 150px;  height:150px;  background-color:red;  border-color: rgba(0,255,0,1);   border-width: 20px;   border-style: solid;"></div>

Answer 12

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

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

这与Box9在一行中选择的答案完成相同的事情。

Answer 13

这应该有效。

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

如果您有绑定到元素的函数调用，请使用类似

的内容

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

Answer 14

我正在使用$(...).val()函数尝试这样的事情，但该函数不存在。事实证明，您可以像对<input>：

那样手动设置值

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

...它会在选择中自动更新。至少适用于Firefox;你可能想在其他人中尝试一下。

Answer 15

此页面上的想法很有帮助，但是我的情况与以往不同。因此，在模式引导程序/快速节点js / aws beantalk中，这对我有用：

var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");

我的select ID = "cJourney"和下拉值存储在变量vcJourney

中

Answer 16

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

elem.checked=true;

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

所以对于上述问题：

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

这对我有用，即使这些选项没有包含在。

中

如果所有标签共享相同的名称，则应在取消选中新标签时取消选中。

Answer 17

要使用set属性为选定的选项标签在JavaScript中设置值

var newvalue = 10;
var x = document.getElementById("optionid").selectedIndex;
    document.getElementById("optionid")[x].setAttribute('value', newvalue);

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

17 个答案:

将选项设为defaultSelected

将选项设为默认值动态创建选项时选中

SELECT.value vs。 OPTION.setAttribute vs。 OPTION.selected vs。 OPTION.defaultSelected

不同方法的比较测试