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

86

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

я имею

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

javascript  jquery  select  jquery-selectors 
— Марк W
источник
Я думал, что это так просто, но, похоже, не сработало. Думаю, пришло время отладки.
— Mark W
1
— Кристофер
1
Ваше название немного вводит в заблуждение. Вы не выбираете раскрывающийся список, вы выбираете вариант в раскрывающемся списке ... вот почему есть 7 ответов, которые мне совершенно не помогают ...
— user1566694
@ user1566694 Если вы хотите получить техническую информацию, это на самом деле не раскрывающийся список, а «выбор»
— Марк В.

Ответы:

155

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

$('#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>
Развернуть фрагмент

— Джеф Гилберт
источник
21
Согласен с вышеизложенным. Согласно вашему коду, это будет$('#mySelect option[value="fg"]').attr('selected', true)
— Мартавис П.
Моя ошибка. Я видел, что в некоторых случаях это не работает, но на скрипке это явно работает.
— Мартавис П.
2
Я просто буду осторожен с этим. Он не запускает событие 'change' в теге <select>. Если вы не используете это событие, это нормально.
— Чад Фишер
2
@ChadFisher Если вы используете событие изменения, активируйте его с помощью$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
Действительно, изменение триггера помогает, когда вы написали дополнительный код для выполнения определенных действий, таких как обновление модели, даже обновления модели представления ASP.net также происходят при событии изменения DD. +1
— Div Tiwari
8

Вы можете использовать этот код 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 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Абдо-Хост
источник
1
или $ ('# mySelect'). val ('ab'). trigger ("change") ;; в случае, если вы используете плагин select2.
— Vaibhav Jain
1
.change () помог мне обновить атрибут модели ASP.net MVC. Спасибо за ответ.
— Div Tiwari
Спасибо ... .trigger ('change') Работает отлично!
— LUISAO
2

Может быть, поздно отвечать, но хоть кому-нибудь помогут.

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

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

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

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

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

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

где 'fg' - значение опции

— Манжубойз
источник
Выбор на основе индекса используется редко, однако это хороший вариант, учитывая сценарий, в котором вы написали общий код для настройки раскрывающихся списков, а значения меняются в зависимости от разных DD. Благодаря :).
— Div Tiwari
1 

$('#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>
Развернуть фрагмент

— Сиддхартха
источник
1

Этот код работал у меня:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

С помощью этого списка выбора HTML:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— Ноле
источник
0

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

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

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

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

Единственное, что нужно отметить, помимо сообщения, это:

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

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

— user1585204
источник
Вы здесь не по теме. Вопрос заключается в простом изменении выбора на основе его значения с помощью JQuery. Элементы пользовательского интерфейса не задействованы.
— Mark W
0

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

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

});
— Hardik
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.