установить параметр" selected " атрибут из динамического созданного параметра
у меня есть динамически созданная опция select с помощью функции 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.
спасибо
15 ответов
хороший вопрос. Вам нужно будет изменить 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/
ты слишком много думаешь:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
вместо изменения самого HTML вы должны просто установить значение, которое вы хотите выбрать элемент:
$(function() {
$("#country").val("Indonesia");
});
// 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);
что вы хотите сделать, это установить атрибут selectedIndex свойство выбора.
country.options.selectedIndex = index_of_indonesia;
изменение атрибута "selected" обычно не работает в IE. Если ты ... --4-->действительно хотите поведение, которое вы описываете, я предлагаю вам написать пользовательскую функцию сброса javascript, чтобы сбросить все остальные значения в форме по умолчанию.
так много неправильных ответов!
чтобы указать значение, к которому поле формы должно вернуться при сбросе формы, используйте следующие свойства:
- флажок или переключатель:
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;
}
теперь, когда форма сброшена, выбранная опция будет той, которую вы указали.
это работает в FF, IE9
var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
// 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 лох.
вы можете искать все значения параметров, пока не найдете правильный.
var defaultVal = "Country";
$("#select").find("option").each(function () {
if ($(this).val() == defaultVal) {
$(this).prop("selected", "selected");
}
});
Это должно работать.
$("#country [value='ID']").attr("selected","selected");
Если у вас есть вызовы функций, связанные с элементом, просто следуйте за ним с чем-то вроде
$("#country").change();
осознайте, что это старый вопрос, но с более новой версией JQuery вы можете сделать следующее:
$("option[val=ID]").prop("selected",true);
Это выполняет то же самое, что и выбранный ответ Box9 в одной строке.
select = document.getElementById('selectId');
var opt = document.createElement('option');
opt.value = 'value';
opt.innerHTML = 'name';
opt.selected = true;
select.appendChild(opt);
чтобы установить параметр ввода во время выполнения, попробуйте установить значение "проверено". (даже если это не флажок)
elem.checked=true;
где elem-ссылка на выбранную опцию.
Итак, для вышеупомянутого вопроса:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;
это работает для меня, даже если параметры не завернуты в a .
Если все теги имеют одинаковое имя, они должны снять флажок, когда установлен новый.
Я пробовал что-то вроде этого, используя $(...).val()
функция, но функция не существует. Оказывается, вы можете вручную установить значение так же, как и для <input>
:
// Set value to Indonesia ("ID"):
$('#country').value = 'ID'
...и он автоматически обновляется в select. Работает на Firefox, по крайней мере; вы можете попробовать его в других.
идеи на этой странице были полезны, но, как всегда, мой сценарий был другим. Итак, в модальном bootstrap / express node js / aws beanstalk это сработало для меня:
var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");
где мой select ID = "cJourney"
и выпадающее значение хранилось в переменной:vcJourney