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> 

И я знаю, что я хочу изменить в раскрывающемся меню так, что выбран вариант со значением «ФГ». Как я могу сделать это с помощью JQuery?

Answer 1

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

Answer 2

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

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

Answer 3

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

Необязательно

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

где 3 является индекс выбора нужного параметра.

Live Demo

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

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

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

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

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

где «фг» является значением опции

Answer 9

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

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

Так где у вас есть HTML, как показано ниже, настройка выбранного индекса устанавливается так, обратите внимание на -input часть, которая в дополнение к ниспадающего 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> 

что-то еще выяснял о Управление автозаполнением - это то, как правильно отключить/удалить его.У нас есть 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'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 10

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