Как выбрать первый элемент в раскрывающемся списке с помощью jquery?

106

Я хочу знать, как выбрать первый вариант во всех тегах select на моей странице с помощью jquery.

пробовал это:

$('select option:nth(0)').attr("selected", "selected");

Но не сработало

javascript jquery html Амр Элгархи
источник

Ответы:

193

Попробуйте это ...

$('select option:first-child').attr("selected", "selected");

Другой вариант - это, но он будет работать только для одного раскрывающегося списка за раз, как показано ниже:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

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

Измените выбранное значение раскрывающегося списка с помощью jQuery

RSolberg
источник
просто измените myID, чтобы выбрать, так как я хочу, чтобы все теги выбора
Амр Элгархи
26
теперь в jQuery вы можете получить доступ к свойствам через .prop()метод. Таким образом, вы можете использовать $("select").prop("selectedIndex",0);для быстрого выбора первого варианта во всех раскрывающихся списках.
CBarr
3
Знаете ли вы, вызовет ли это событие «изменение» во всех браузерах, просто установив атрибут? Похоже, что в Chrome, но тщательно не тестировал. Подумал добавить еще на $('select').trigger('change');всякий случай. Спасибо!
Брайан Армстронг,
3
var myDDL = $('myID')должен иметь хеш в селекторе, чтобы статьvar myDDL = $('#myID')
user1069816
1
Этот метод хорошо работает для меня:$('select option').first().prop('selected',true);
Лоренцо Магон
13

Ваш селектор неправильный, вы, вероятно, искали

$('select option:nth-child(1)')

Это также будет работать:

$('select option:first-child')
Aistina
источник
3
Индекс селектора nth-child в CSS начинается с 1, а не с 0
Сергей
10

Альтернативное решение для RSolgberg, которое запускает 'onchange'событие, если оно присутствует:

$("#target").val($("#target option:first").val());

Как сделать первый вариант <select> выбранным с помощью jQuery?

Мухаммад Омар Эль-Шурбаджи
источник
1
Это работает лучше, чем принятый ответ, если вам придется менять выбранный параметр несколько раз. Например, если вы отфильтруете свои параметры и отобразите их часть.
Гийом Рено,
4

Вероятно, вы хотите:

$("select option:first-child")

Что это за код

attr("selected", "selected");

делает, устанавливает атрибут "selected" на "selected"

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

$("select").children("[selected]")
RichN
источник
1
Замените attrна, propесли вы используете jQuery 1.6+
Джесан Фафон
2

Я отвечаю, потому что предыдущие ответы перестали работать с последней версией jQuery. Я не знаю, когда он перестал работать, но в документации говорится, что .prop () был предпочтительным методом для получения / установки свойств с jQuery 1.6.

Вот как я заставил его работать (с jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

Я использую knockoutjs, и привязки изменений не запускались с приведенным выше кодом, поэтому я добавил .change () в конец.

Вот что мне нужно для моего решения:

$('select option:nth-child(1)').prop("selected", true).change();

См. Примечания .prop () в документации здесь: http://api.jquery.com/prop/

Брэндон
источник
2

Вот простое javascriptрешение, которое работает в большинстве случаев:

document.getElementById("selectId").selectedIndex = "0";
Джагрути
источник
1

если вы хотите проверить текст выбранной опции, независимо от того, является ли он первым дочерним элементом.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}
Сара
источник
Спас меня второй поиск. Это в значительной степени то, что я искал, хотя меня больше интересовало изменение значения, чем его проверка. $('#myID option:selected').text('NEW STRING');
Рики Пейн
1 
    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);
ShivarajRH
источник