JQuery - วิธีเลือกรายการแบบเลื่อนลงตามมูลค่า

ฉันต้องการตั้งค่ารายการแบบเลื่อนลง (เลือก) เพื่อเปลี่ยนแปลงตามค่าของรายการ

ฉันมี

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

และฉันรู้ว่าฉันต้องการเปลี่ยนดรอปดาวน์เพื่อให้เลือกตัวเลือกที่มีค่าเป็น "fg" ฉันจะทำสิ่งนี้กับ JQuery ได้อย่างไร?

คุณควรใช้

$('#dropdownid').val('selectedvalue');

นี่คือตัวอย่าง:

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

$('#yourdropddownid').val('fg');

ทางเลือก

$('select>option:eq(3)').attr('selected', true);

ที่3เป็นดัชนีของตัวเลือกที่คุณต้องการ

การสาธิตสด

$('#mySelect').val('fg');...........

คุณสามารถใช้รหัส jQuery ซึ่งฉันพบว่ามันใช้ง่าย:

$('#your_id [value=3]').attr('selected', 'true');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>

 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

คุณสามารถใช้:

$('#select_id').val('fg')

ในกรณีของคุณ$("#mySelect").val("fg"):)

อาจจะสายเกินไปที่จะตอบ แต่อย่างน้อยก็มีบางคนที่จะได้รับความช่วยเหลือ

คุณสามารถลองสองตัวเลือก:

นี่คือผลลัพธ์เมื่อคุณต้องการกำหนดตามค่าดัชนีโดยที่ '0' คือดัชนี

 $('#mySelect').prop('selectedIndex', 0);

อย่าใช้ 'attr' เนื่องจากเลิกใช้กับ jquery ล่าสุดแล้ว

เมื่อคุณต้องการเลือกตามค่าตัวเลือกให้เลือกสิ่งนี้:

 $('#mySelect').val('fg');

โดยที่ 'fg' คือค่าตัวเลือก

รหัสนี้ใช้ได้กับฉัน:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

ด้วยรายการเลือก HTML นี้:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

ฉันมีสถานการณ์ที่แตกต่างออกไปซึ่งค่ารายการแบบหล่นลงได้รับการเข้ารหัสอย่างหนักแล้ว มีเพียง 12 เขตเท่านั้นดังนั้นการควบคุม UI ของการเติมข้อความอัตโนมัติ jQuery จึงไม่ถูกเติมด้วยโค้ด

วิธีแก้ง่ายกว่ามาก เนื่องจากฉันต้องลุยผ่านโพสต์อื่น ๆ ซึ่งสันนิษฐานว่ากำลังโหลดการควบคุมแบบไดนามิกไม่พบสิ่งที่ฉันต้องการและในที่สุดก็คิดออก

ดังนั้นเมื่อคุณมี HTML ดังต่อไปนี้การตั้งค่าดัชนีที่เลือกจะถูกตั้งค่าเช่นนี้ให้สังเกตส่วน -input ซึ่งอยู่นอกเหนือจากรหัสแบบเลื่อนลง:

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

สิ่งอื่นที่พบเกี่ยวกับการควบคุมการเติมข้อความอัตโนมัติคือวิธีปิดใช้งาน / ล้างข้อมูลอย่างถูกต้อง เรามีการควบคุม 3 อย่างที่ทำงานร่วมกันโดย 2 ส่วนควบคุมพิเศษร่วมกัน:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

บางส่วนอยู่นอกเหนือขอบเขตของโพสต์และฉันไม่รู้ว่าจะวางไว้ตรงไหน เนื่องจากสิ่งนี้มีประโยชน์มากและต้องใช้เวลาพอสมควรจึงมีการแบ่งปัน

ยกเลิกนอกจากนี้ ... ในการเปิดใช้งานการควบคุมเช่นนี้มันเป็น (ปิดใช้งานเท็จ) และไม่ (เปิดใช้งานจริง) - ซึ่งต้องใช้เวลาเล็กน้อยในการคิดออก :)

สิ่งเดียวที่ควรทราบนอกเหนือจากโพสต์คือ:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

แชร์ทั้งหมดเนื่องจากใช้เวลานานเกินไปในการเรียนรู้สิ่งเหล่านี้ในทันที หวังว่านี่จะเป็นประโยชน์

$ ('select # myselect option [value = "ab"]')

คุณสามารถเลือกค่าตัวเลือกแบบเลื่อนลงตามชื่อ

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});