Як зробити перший параметр <select>, обраний за допомогою jQuery

Як зробити перший варіант обраного за допомогою jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

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

Ви можете спробувати це

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

Коли ви використовуєте

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

це не буде працювати в Chrome та Safari, якщо значення першого параметра є нульовим.

я віддаю перевагу

$("#target option:first").attr('selected','selected');

оскільки він може працювати у всіх браузерах.

Зміна значення вхідного вибору або коригування вибраного атрибута може перезаписати властивість selectedOptions за замовчуванням елемента DOM, в результаті чого елемент, який може не відновитись належним чином, у формі, в якій було викликано подію скидання.

Використовуйте метод підтримки jQuery, щоб очистити та встановити необхідний параметр:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

Один тонкий момент, на який я думаю, що я дізнався про відповіді, проголосовані вгорі, - це те, що, хоча вони правильно змінюють вибране значення, вони не оновлюють елемент, який бачить користувач (лише коли натискають віджет, вони побачать чек поруч із оновлений елемент).

Зміна виклику .change () до кінця також оновить віджет інтерфейсу.

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

(Зверніть увагу, що я помітив це під час використання jQuery Mobile та вікна на робочому столі Chrome, тому це може бути не скрізь).

Якщо у вас відключені параметри, ви можете додати не ([відключено]), щоб запобігти їх вибору, що призводить до наступного:

$("#target option:not([disabled]):first").attr('selected','selected')

Ще одним способом скидання значень (для декількох вибраних елементів) може бути такий:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

Просто так:

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

Я виявив, що встановлення вибраного attr не працює, якщо вже є вибраний атрибут. Код, який я зараз використовую, спочатку скасує вибраний атрибут, а потім вибере перший варіант.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

Хоча кожна функція, ймовірно, не потрібна ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

працює для мене.

Ось як я це зробив:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

Для мене це працювало лише за допомогою тригера ('зміни') наприкінці, як це:

$("#target option:first").attr('selected','selected').trigger('change');

Якщо ви збираєтесь використовувати перший варіант, як типовий варіант

<select>
    <option value="">Please select an option below</option>
    ...

тоді ви можете просто використовувати:

$('select').val('');

Це приємно і просто.

Це працювало для мене!

$("#target").prop("selectedIndex", 0);

На звороті відповіді Джеймса Лі Бейкера я вважаю за краще це рішення, оскільки воно знімає залежність від підтримки браузера для: по-перше: вибраного ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

Для мене це працювало лише тоді, коли я додав наступний код:

.change();

Для мене це спрацювало лише тоді, коли я додав наступний код: Оскільки я хотів "скинути" форму, тобто вибрати всі перші параметри всіх виділених форм, я використав такий код:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

Використання:

$("#selectbox option:first").val()

Будь ласка, знайдіть працюючу просту в цій JSFiddle .

Для мене це працювало лише тоді, коли я додав наступний рядок коду

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

$("#target").val(null);

добре працював у хромі

Якщо ви зберігаєте jQuery об'єкт елемента вибору:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Перевірте цей найкращий підхід, використовуючи jQuery з ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

Ви можете вибрати будь-який варіант dropdown, скориставшись ним.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

Замініть ідентифікатор конкретним ідентифікатором вибору тегу та індексом конкретним елементом, який ви бажаєте вибрати.

тобто

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Тому тут для вибору першого елемента я буду використовувати наступний код:

$('select#ddlState').val($('#ddlState option')[0].value)

Використання:

alert($( "#target option:first" ).text());