установить опцию «выбранный» атрибут из динамически создаваемой опции - PullRequest
Новая
       30

установить опцию «выбранный» атрибут из динамически создаваемой опции

59 голосов
/ 04 января 2011

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

Мне нужно, чтобы опция "Indonesia" имела атрибут selected="selected", поэтому, когда я нажимаю кнопку сброса, она снова выбирает "Indonesia".

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

спасибо

Ответы [ 15 ]

104 голосов
/ 04 января 2011

Ты думаешь над этим: 

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
26 голосов
/ 04 января 2011

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

21 голосов
/ 04 декабря 2012

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

$(function() {
    $("#country").val("Indonesia");
});
12 голосов
/ 07 ноября 2015

Столько неправильных ответов!

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

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

Now,после сброса формы выбранной вами опцией будет указанная вами.

11 голосов
/ 24 октября 2012 
// 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);​​
9 голосов
/ 04 января 2011

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

country.options.selectedIndex = index_of_indonesia;

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

6 голосов
/ 08 февраля 2013

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

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
2 голосов
/ 04 января 2011 
// 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;

Бегиту Лох.

1 голос
/ 29 ноября 2016 
select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);
1 голос
/ 23 апреля 2014

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

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

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

Страница:
...