วิธีตั้งค่าตัวเลือกแรกบนกล่องเลือกโดยใช้ jQuery

ฉันมี HTML สองselectกล่อง ฉันต้องการรีเซ็ตหนึ่งselectกล่องเมื่อฉันทำการเลือกในอีกกล่องหนึ่ง

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

เมื่อฉันเลือกตัวเลือกแรกselect(เช่นid="name") ฉันต้องรีเซ็ตตัวที่สองselectเป็นselect all; ในทำนองเดียวกันเมื่อผมเลือกตัวเลือกของที่สองselect(คือid="name2") ผมต้องรีเซ็ตแรกไปselectselect all

ฉันจะทำเช่นนั้นได้อย่างไร?

สิ่งนี้ควรทำเคล็ดลับ: https://jsfiddle.net/TmJCE/898/

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


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

หากคุณต้องการรีเซ็ตองค์ประกอบที่เลือกเป็นตำแหน่งแรกวิธีที่ง่ายที่สุดอาจเป็น:

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

ในการรีเซ็ตองค์ประกอบที่เลือกทั้งหมดในเอกสาร:

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

แก้ไข: เพื่อชี้แจงตามความคิดเห็นด้านล่างการดำเนินการนี้จะรีเซ็ตองค์ประกอบที่เลือกเป็นรายการว่างแรกและเฉพาะเมื่อมีรายการว่างอยู่ในรายการ

ตามที่ @PierredeLESPINAY ชี้ให้เห็นในความคิดเห็นวิธีแก้ปัญหาเดิมของฉันไม่ถูกต้อง - มันจะรีเซ็ตรายการแบบเลื่อนลงเป็นตัวเลือกที่อยู่บนสุด แต่เนื่องจากundefinedค่าที่ส่งคืนได้รับการแก้ไขเป็นดัชนี 0 เท่านั้น

นี่เป็นวิธีแก้ไขที่ถูกต้องซึ่งคำนึงถึงselectedคุณสมบัติ:

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

สาธิต : http://jsfiddle.net/weg82/257/

คำตอบเดิม - ไม่ถูกต้อง

ใน jQuery 1.6+ คุณต้องใช้.propเมธอดเพื่อรับการเลือกเริ่มต้น:

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

หากต้องการรีเซ็ตแบบไดนามิกเมื่อรายการแบบเลื่อนลงรายการแรกเปลี่ยนแปลงให้ใช้.changeเหตุการณ์:

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

ใช้สิ่งนี้หากคุณต้องการรีเซ็ตการเลือกเป็นตัวเลือกที่มีแอตทริบิวต์ "ที่เลือก" ทำงานคล้ายกับฟังก์ชัน form.reset () inbuilt javascript เพื่อเลือก

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

สิ่งนี้ช่วยฉันได้มาก

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

นี่คือวิธีที่ฉันทำให้มันใช้งานได้หากคุณต้องการให้มันกลับไปที่ตัวเลือกแรกของคุณเช่น "เลือกตัวเลือก" "Select_id_wrap" เห็นได้ชัดว่าเป็น div ที่อยู่รอบ ๆ การเลือก แต่ฉันแค่ต้องการทำให้ชัดเจนในกรณีที่มี มีผลต่อวิธีการทำงานนี้ ทุ่นระเบิดรีเซ็ตเป็นฟังก์ชั่นคลิก แต่ฉันแน่ใจว่ามันจะทำงานในการเปลี่ยนแปลงได้เช่นกัน ...

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

ใช้รหัสด้านล่าง ดูการทำงานที่นี่http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

นี้ยังสามารถใช้

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


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

นี่เป็นวิธีที่ยืดหยุ่น / ใช้ซ้ำได้มากที่สุดในการรีเซ็ตกล่องเลือกทั้งหมดในแบบฟอร์มของคุณ

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

ต่อไปนี้เป็นวิธีจัดการกับองค์ประกอบตัวเลือกแบบสุ่มที่กำหนดเป็นค่าเริ่มต้น (ในกรณีนี้ข้อความ 2 คือค่าเริ่มต้น):

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

คุณสามารถลองสิ่งนี้:

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

ฉันมีปัญหาในการใช้คุณสมบัติ defaultSelected ในคำตอบโดย @Jens Roland ใน jQuery v1.9.1 วิธีทั่วไปมากขึ้น (ด้วยการเลือกที่ขึ้นอยู่กับจำนวนมาก) คือการใส่แอตทริบิวต์ข้อมูลเริ่มต้นในการเลือกที่ขึ้นอยู่กับของคุณจากนั้นจึงวนซ้ำเมื่อตั้งค่าใหม่

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

และจาวาสคริปต์ ...

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

ดูhttp://jsfiddle.net/8hvqN/สำหรับเวอร์ชันที่ใช้งานได้ข้างต้น

ฉันสร้างตัวเลือกใหม่ในแท็กเลือกที่มีค่าสตริงว่าง ("") และใช้:

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

ใช้ jquery เพื่อผูกเหตุการณ์ onchange เพื่อเลือก แต่คุณไม่จำเป็นต้องสร้าง$(this)วัตถุ jquery อื่น

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

ใช้รหัสนี้เพื่อรีเซ็ตฟิลด์การเลือกทั้งหมดเป็นตัวเลือกเริ่มต้นซึ่งมีการกำหนดแอตทริบิวต์ที่เลือกไว้

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

นี่คือทางออกที่ดีที่สุดที่ฉันใช้ สิ่งนี้จะใช้สำหรับมากกว่า 1 slectbox

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

การตั้งค่าตัวเลือก 1 ในองค์ประกอบเลือกสามารถทำได้โดยส่วนนี้ หากต้องการแสดงให้เห็นภาพคุณมี tp add .trigger ('change') ต่อท้าย

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