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?

10 69

10 ответов:

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

дополнительно

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

здесь 3 - это индекс нужного вам параметра.

Демо

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

Вы можете использовать этот код jQuery, который я нахожу eaiser использовать:

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

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

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

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

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

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

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

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

Не используйте 'attr', так как он устарел с последним jquery.

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

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

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

вы можете выбрать выпадающее значение параметра по имени

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

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

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

Итак, где у вас есть 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());
        }
    });

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