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

Question

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

У меня есть

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

Answer 1

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

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

Таким образом, если у вас есть 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());
        }
    });

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

Answer 2

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

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