JQuery kullanarak bir seçim kutusundaki ilk seçenek nasıl ayarlanır?

İki HTML selectkutum var. selectBaşka bir seçim yaptığımda bir kutuyu sıfırlamam gerekiyor .

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

Ben ilk bir seçeneği seçtiğinizde select(yani id="name"), ikinciyi sıfırlamak için gerekmez selectiçin select all; Benzer şekilde, ne zaman saniyenin bir seçenek belirleyin select(örneğin id="name2"), ilk sıfırlamak için gerekmez selectiçin select all.

Bunu nasıl yapabilirim?

Böyle bir şey hile yapmalıdır: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Seçili öğeyi ilk konumuna sıfırlamak istiyorsanız, en basit yol olabilir:

$('#name2').val('');

Belgedeki tüm seçili öğeleri sıfırlamak için:

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

DÜZENLE: Aşağıdaki açıklamaya göre açıklığa kavuşturmak için, bu, select öğesini ilk boş girişine ve yalnızca listede boş bir giriş varsa sıfırlar.

Yorumlarda @PierredeLESPINAY tarafından belirtildiği gibi, orijinal çözümüm yanlıştı - açılır liste en üst seçeneğe sıfırlanacak, ancak yalnızca undefineddönüş değeri 0 dizinine çözüldüğü için.

İşte selectedmülkü dikkate alan doğru bir çözüm :

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

DEMO : http://jsfiddle.net/weg82/257/

Orijinal cevap - INCORRECT

JQuery 1.6+ sürümünde .propvarsayılan seçimi almak için yöntemi kullanmanız gerekir :

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

İlk açılır menü değiştiğinde dinamik olarak sıfırlanmasını sağlamak için .changeetkinliği kullanın :

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Seçimi "seçili" özelliğe sahip seçeneğe sıfırlamak istiyorsanız bunu kullanın. Select form.reset () içindeki javascript işlevine benzer şekilde çalışır.

 $("#name").val($("#name option[selected]").val());

Bu bana çok yardımcı oluyor.

$(yourSelector).find('select option:eq(0)').prop('selected', true);

Sadece ilk seçeneğinize geri dönmek istiyorsanız, bunu nasıl çalıştıracağım, örneğin "Bir seçenek seçin" "Select_id_wrap" açıkçası seçimin etrafındaki div, ancak sadece bunun nasıl çalıştığına dair herhangi bir etki. Benimki bir tıklama işlevine sıfırlanır, ancak eminim ki bir değişiklik içinde de çalışacaktır ...

$("#select_id_wrap").find("select option").prop("selected", false);

Aşağıdaki kodu kullanın. Burada çalıştığını görün http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

Bu da kullanılabilir

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});

Bu, formunuzdaki tüm seçim kutularını sıfırlamanın en esnek / yeniden kullanılabilir yoludur.

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

Varsayılan değer olarak tanımlanan rastgele bir seçenek öğesiyle nasıl işleneceği aşağıda açıklanmıştır (bu durumda Metin 2 varsayılan değerdir):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

Bunu deneyebilirsiniz:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

@Jens Roland tarafından jQuery v1.9.1 yanıtında defaultSelected özelliği kullanırken bir sorun yaşadım. Daha genel bir yol (birçok bağımlı seçimle), bağımlı seçimlerinize veri varsayılanı niteliği koymak ve daha sonra sıfırlama sırasında bunları yinelemek olacaktır.

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

Ve javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

Yukarıdakilerin çalışan bir sürümü için bkz. Http://jsfiddle.net/8hvqN/ .

Boş dize ("") değerine sahip seçim etiketinde yeni bir seçenek oluşturdum ve kullandım:

$("form.query").find('select#topic').val("");

Bağlama onchange olayı seçmek için jquery kullanın, ancak başka bir $(this)jquery nesnesi oluşturmanız gerekmez .

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

Tüm seçim alanlarını, seçilen özniteliğin tanımlandığı varsayılan seçeneğe sıfırlamak için bu kodu kullanın.

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

İşte im kullanarak en iyi çözüm. Bu 1'den fazla slectbox için geçerli olacak

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

Seçme öğesindeki ayar seçeneği 1, bu segment tarafından yapılabilir. Görsel olarak göstermek için, sonunda tp add .trigger ('change') var.

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