Установить опцию "selected" из динамической созданной опции

У меня есть динамически созданная опция выбора с использованием функции 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>

и отобразить "Индонезия" в качестве выбранной по умолчанию опции. note: в этой опции нет атрибута 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", поэтому, когда я нажимаю кнопку reset, он снова выберет "Индонезия" .

изменение функции js для динамического создания параметров "страна" не является вариантом. решение должно работать как в FFX, так и в IE.

Благодарю вас

+60
источник поделиться
16 ответов
Хороший вопрос. Вам нужно будет изменить сам 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. Посмотрите, как работает кнопка reset здесь: http://jsfiddle.net/XmW49/

+26
источник

Ты слишком задумываешься:

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
+104
источник
другие ответы

Связанные вопросы


Похожие вопросы

Вместо того, чтобы изменять сам HTML, вы должны просто установить желаемое значение из относительного элемента option:

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

В этом случае "ID" - это значение опции "Индонезия"

+23
источник

Так много неправильных ответов!

Чтобы указать значение, которое должно быть возвращено в поле формы после сброса формы, используйте следующие свойства:

  • Флажок или переключатель: 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;
}

Теперь, когда форма reset, выбранная опция будет той, которую вы указали.

+13
источник
// 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);​​
+11
источник

Что вы хотите сделать, это установить атрибут selectedIndex в поле выбора.

country.options.selectedIndex = index_of_indonesia;

Изменение атрибута 'selected' обычно не работает в IE. Если вам действительно нравится поведение, которое вы описываете, я предлагаю вам написать пользовательскую функцию javascript reset для reset всех остальных значений в форме по умолчанию.

+9
источник

Это работает в FF, IE9

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
+6
источник
// 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.

+2
источник

Вы можете искать все значения параметров, пока не найдете правильный.

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

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

        $(this).prop("selected", "selected");
    }
});
+1
источник

Это должно сработать.

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

Если у вас есть вызовы функций, привязанные к элементу, просто следуйте ему с чем-то вроде

$("#country").change();
+1
источник
select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);
+1
источник

Сделать вариант 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.

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>

Option gets Attribute selected by using defaultSelected

Сделать параметр defaultSelected при динамическом создании параметров

Чтобы сделать параметр selected при заполнении элемента SELECT, используйте конструктор Option() 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 против OPTION.setAttribute против OPTION.selected против OPTION.defaultSelected

Хотя некоторые (более старые) браузеры интерпретируют атрибут OPTION selected как "строковое" состояние, HTML-спецификации WHATWG html.spec.whatwg.org утверждают, что он должен представлять логическую selectedness

Выбранность элемента option является логическим состоянием, изначально ложным. Если не указано иное, при создании элемента его выборка должна быть установлена в значение 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>

Хотя тест 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')?

Вместо этого тест 3. (и 4.) с использованием defaultSelected дает ожидаемые результаты:

  • Атрибут selected в качестве именованного состояния выбора.
  • Свойство selected в объекте элемента с логическим значением.
+1
источник

Чтобы установить параметр ввода во время выполнения, попробуйте установить значение "checked". (даже если это не флажок)

elem.checked=true;

Где elem - ссылка на выбранную опцию.

Итак, для вышеупомянутой проблемы:

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

Это работает для меня, даже если параметры не завернуты в.

Если все теги имеют одно и то же имя, они должны снять флажок, если новый флажок установлен.

0
источник

Поймите, это старый вопрос, но с более новой версией JQuery вы можете сделать следующее:

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

Выполняет то же самое, что и Box9, в одной строке.

0
источник

Идеи на этой странице были полезны, но мой сценарий был другим. Итак, в модальном загрузочном/экспресс-узле js/aws beanstalk это работает для меня:

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

Где мой select ID = "cJourney" и раскрывающееся значение хранились в переменной: vcJourney

0
источник

Я пытался что-то вроде этого использовать с помощью функции $(...).val(), но функции не было. Оказывается, вы можете вручную установить значение так же, как вы это делаете, для <input>:

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

... и он автоматически обновляется при выборе. По крайней мере работает на Firefox; вы можете попробовать его в других.

-1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос