JQuery ile seçilen <select> ilk seçeneği nasıl yapılır

JQuery ile seçilen ilk seçeneği nasıl yapabilirim?

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

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

Bunu deneyebilirsin

$("#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');

Kullandığınızda

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

ilk seçenek değeri boşsa Chrome ve Safari'de çalışmaz.

tercih ederim

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

çünkü tüm tarayıcılarda çalışabilir.

Seçme girişinin değerini değiştirmek veya seçilen özniteliği ayarlamak, DOM öğesinin varsayılan seçilmişOptions özelliğinin üzerine yazabilir ve reset olayı çağrılmış bir formda düzgün bir şekilde sıfırlanamayan bir öğeye neden olabilir.

Gereken seçeneği temizlemek ve ayarlamak için jQuery'nin prop yöntemini kullanın:

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

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

En çok oy alan cevaplar hakkında keşfettiğimi düşündüğüm ince bir nokta , seçilen değeri doğru bir şekilde değiştirseler bile, kullanıcının gördüğü öğeyi güncellememeleri (yalnızca widget'ı tıkladıklarında güncellenmiş öğe).

Bir .change () çağrısını sonuna kadar zincirlemek, kullanıcı arabirimi widget'ını da güncelleştirir.

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

(Bunu jQuery Mobile ve Chrome masaüstünde bir kutu kullanırken fark ettim, bu yüzden bu her yerde böyle olmayabilir).

Devre dışı bırakılmış seçenekleriniz varsa , aşağıdakilerle sonuçlanan seçeneklerin seçilmesini engellemek için ([devre dışı]) öğesi ekleyebilirsiniz :

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

Değerleri sıfırlamanın başka bir yolu (seçilen birden çok öğe için) şu olabilir:

$("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;

});

Bu kadar basit:

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

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

Zaten seçilmiş bir öznitelik varsa, sadece attr seçilen ayarın çalışmadığını gördüm. Şimdi kullandığım kod önce seçilen özniteliğin ayarını kaldırır, ardından ilk seçeneği seçer.

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

Her bir işlev muhtemelen gerekli olmasa da ...

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

benim için çalışıyor.

İşte nasıl yaparım:

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

Sadece sonunda bir tetikleyici ('değişiklik') kullanarak benim için çalıştı, şöyle:

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

İlk seçeneği varsayılan olarak aşağıdaki gibi kullanacaksanız

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

o zaman sadece kullanabilirsiniz:

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

Güzel ve basit.

Bu benim için çalıştı!

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

James Lee Baker'ın cevabının arkasında, tarayıcı desteğine olan güveni kaldırdığı için bu çözümü tercih ediyorum: ilk: seçili ...

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

Benim için sadece aşağıdaki kodu eklediğimde çalıştı:

.change();

Benim için sadece aşağıdaki kodu eklediğimde çalıştı: Formu "sıfırlamak" istedim, yani, formun tüm seçimlerinin tüm ilk seçeneklerini seçin, ben aşağıdaki kodu kullandım:

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

kullanın:

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

Lütfen bu JSFiddle'da basit çalışmayı bulun .

Benim için, sadece aşağıdaki kod satırını eklediğimde çalıştı

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

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

kromda iyi çalıştı

Select öğesinin jQuery nesnesini saklıyorsanız:

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

...

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

ECMAScript 6 ile jQuery kullanarak bu en iyi yaklaşımı kontrol edin :

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

dropdownKullanarak herhangi bir seçeneği seçebilirsiniz .

// '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)

Değiştir id özellikle seçme etiketi kimliği ile endeks seçmek istediğiniz belirli öğesiyle.

yani

<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>

Yani burada ilk eleman seçimi için aşağıdaki kodu kullanacağım:

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

kullanın:

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