Как выбрать первый элемент в раскрывающемся списке с помощью 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

Это работает лучше, чем принятый ответ, если вам придется менять выбранный параметр несколько раз. Например, если вы отфильтруете свои параметры и отобразите их часть.

— Гийом Рено,

5

$("#DDLID").val( $("#DDLID option:first-child").val() );

Для полных операций с раскрывающимся списком с использованием JQuery

— виджей
источник

Ссылка теперь мертва.

— Пол Горбас

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
источник