Подтвердить что ты не робот

Установить опцию "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.

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

4b9b3361

Ответ 1

Хороший вопрос. Вам нужно будет изменить сам 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/

Ответ 2

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

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

Ответ 3

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

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

В этом случае "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;
}

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

Ответ 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);​​

Ответ 6

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

country.options.selectedIndex = index_of_indonesia;

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

Ответ 7

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

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

Ответ 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.

Ответ 9

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

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

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

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

Ответ 10

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

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

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

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

Ответ 11

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

Ответ 12

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

Ответ 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, в одной строке.

Ответ 15

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

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

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

Ответ 16

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

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

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