JQuery - cách chọn mục thả xuống dựa trên giá trị

Tôi muốn đặt một menu thả xuống (chọn) được thay đổi dựa trên giá trị của các mục nhập.

Tôi có

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

Và tôi biết rằng tôi muốn thay đổi menu thả xuống để tùy chọn có giá trị là "fg" được chọn. Làm cách nào để thực hiện việc này với JQuery?

Bạn nên sử dụng

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

Đây là một ví dụ:

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

Tùy ý,

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

đâu 3là chỉ mục của tùy chọn bạn muốn.

Bản thử trực tiếp

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

Bạn có thể sử dụng mã jQuery này mà tôi thấy nó rất hay để sử dụng:

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

Bạn chỉ cần sử dụng:

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

Trong trường hợp của bạn $("#mySelect").val("fg"):)

Có thể là quá muộn để trả lời, nhưng ít nhất một số người sẽ nhận được sự giúp đỡ.

Bạn có thể thử hai tùy chọn:

Đây là kết quả khi bạn muốn chỉ định dựa trên giá trị chỉ mục, trong đó '0' là Chỉ mục.

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

không sử dụng 'attr' vì nó không được chấp nhận với jquery mới nhất.

Khi bạn muốn chọn dựa trên giá trị tùy chọn, hãy chọn cái này:

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

trong đó 'fg' là giá trị tùy chọn

Mã này phù hợp với tôi:

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

Với danh sách chọn HTML này:

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

Tôi có một tình huống khác, trong đó các giá trị danh sách thả xuống đã được mã hóa cứng. Chỉ có 12 quận nên điều khiển giao diện người dùng jQuery Autocomplete không được điền bằng mã.

Giải pháp dễ dàng hơn nhiều. Bởi vì tôi đã phải lội qua các bài viết khác, nơi người ta cho rằng điều khiển đang được tải động, không tìm thấy thứ tôi cần và cuối cùng tìm ra nó.

Vì vậy, nơi bạn có HTML như bên dưới, thiết lập chỉ mục đã chọn được đặt như thế này, lưu ý phần -input, ngoài id thả xuống:

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

Một điều khác được tìm ra về điều khiển Tự động điền là cách tắt / làm trống nó một cách chính xác. Chúng tôi có 3 điều khiển hoạt động cùng nhau, 2 trong số đó loại trừ lẫn nhau:

//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
    }
});

Một số điều này nằm ngoài phạm vi của bài đăng và tôi không biết phải đặt nó chính xác ở đâu. Vì điều này rất hữu ích và cần một thời gian để tìm hiểu, nên nó đang được chia sẻ.

Und Ngoài ra ... để kích hoạt một điều khiển như thế này, nó (bị vô hiệu hóa, sai) và KHÔNG (được bật, đúng) - cũng mất một chút thời gian để tìm ra. :)

Điều duy nhất cần lưu ý, ngoài bài đăng, là:

    /*
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());
        }
    });

Tất cả đều chia sẻ vì đã mất quá nhiều thời gian để học những điều này một cách nhanh chóng. Hy vọng điều này là hữu ích.

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

Bạn có thể chọn giá trị tùy chọn thả xuống theo tên

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

});