JQuery - как выбрать выпадающий элемент на основе значения

Я хочу, чтобы выпадающий список (select) менялся в зависимости от значения записей.

У меня

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

ОТВЕТЫ

Ответ 1

Вы должны использовать

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

Ответ 2

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

По выбору,

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

где 3 - индекс нужной вам опции.

Live Demo

Ответ 3

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

Ответ 4

Вы можете использовать этот код 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>

Ответ 5

Вы можете просто использовать:

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

Ответ 6

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

Ответ 7

В вашем случае $("#mySelect").val("fg"):)

Ответ 8

Может быть, слишком поздно ответить, но по крайней мере кто-то получит помощь.

Вы можете попробовать два варианта:

Это результат, когда вы хотите назначить на основе значения индекса, где "0" - это индекс.

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

не использовать 'attr', поскольку он устарел с помощью последнего jquery.

Если вы хотите выбрать на основе значения параметра, выберите это:

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

где 'fg' - значение параметра

Ответ 9

Вы можете выбрать значение опции раскрывающегося списка по имени

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

Ответ 10

У меня другая ситуация, когда значения выпадающего списка уже жестко закодированы. Есть только 12 районов, поэтому пользовательский интерфейс jQuery Autocomplete UI не заполняется кодом.

Решение намного проще. Потому что мне приходилось пробираться через другие сообщения, где предполагалось, что управление динамически загружается, не находило того, что мне было нужно, а потом, наконец, выяснило это.

Итак, где у вас есть HTML, как показано ниже, установка выбранного индекса устанавливается так: обратите внимание на часть -вход, которая находится в дополнение к выпадающему id:

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

Что-то еще, что выяснилось в элементе управления Autocomplete, это то, как правильно отключить/опорожнить его. У нас есть 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
    }
});

Некоторые из них выходят за рамки публикации, и я не знаю, где это выразить. Так как это очень полезно и потребовалось некоторое время, чтобы разобраться, он был разделен.

Und Также... чтобы включить такой элемент управления, он (отключен, false) и NOT (включен, истина) - это также заняло немного времени, чтобы понять.:)

Единственное, что нужно отметить, помимо публикации, - это:

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

Все поделились, потому что слишком долго изучать эти вещи "на лету". Надеюсь, что это будет полезно.

Ответ 11

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