it-swarm.com.ru

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

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

Я имею

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

73
Mark W

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

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

122
Jeaf Gilbert
$('#yourdropddownid').val('fg');

По выбору,

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

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

Live Demo

21
xbonez
$('#mySelect').val('fg');...........
15
Royi Namir

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

7
Sky

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

$('#select_id').val('fg')
5
Dagang
$('#mySelect').val('ab').change();
4
Abdo-Host

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

2
Kamran Ahmed

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

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

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

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

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

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

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

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

1
Manjuboyz

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

0
MythBank

У меня другая ситуация, когда значения выпадающего списка уже жестко запрограммированы. Всего 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
    }
});

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

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

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

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

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

0
user1585204

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

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

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

0
Siddhartha