Как я могу установить значение DropDownList с помощью jQuery?

308

Как говорится в этом вопросе, как установить значение элемента управления DropDownList с помощью jQuery?

Теги:
drop-down-menu

10 ответов

473
Лучший ответ
$("#mydropdownlist").val("thevalue");

просто убедитесь, что значение в тегах параметров соответствует значению в методе val.

  • 0
    У меня есть валидатор диапазона для раскрывающегося списка, и я устанавливаю значение раскрывающегося списка, как вы описали выше, но валидатор диапазона не дает подсказки выбрать значение (когда выбранное значение находится в пределах диапазона). Пожалуйста, смотрите мой вопрос stackoverflow.com/questions/3165033/…
  • 17
    Это не вызывает событие «изменение».
Показать ещё 4 комментария
47

Если вы работаете с индексом, вы можете напрямую установить выделенный индекс с помощью .attr():

$("#mydropdownlist").attr('selectedIndex', 0);

Это установит его в первое значение в droplist.

Edit: То, как я делал это выше, раньше работал. Но похоже, что это уже не так.

Но, как Хан так приятно отмечает в комментариях, правильный способ сделать это:

$("#mydropdownlist").get(0).selectedIndex = index_here;
  • 1
    Работает как шарм!
  • 7
    Теперь это не работает вообще, потому что у тега select нет атрибута с именем selectedIndex . Это свойство объекта DOM. Следовательно, код должен быть: $("#mydropdownlist").get(0).selectedIndex = index_here;
Показать ещё 5 комментариев
28

Как было предложено @Nick Berardi, если ваше измененное значение не отражается на лицевой части интерфейса пользователя, попробуйте:

$("#mydropdownlist").val("thevalue").change();
  • 1
    Большое спасибо, всего одна строка, аккуратная и полезная, чтобы также вызвать событие change () для SelectBox, используя jQuery и Laravel Forms.
  • 0
    Это единственный ответ, в котором изменение действительно отображается в раскрывающемся списке. selectmenu не определено в моей версии jQuery, но change() делает свое дело.
17

Попробуйте этот очень простой подход:

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");
  • 1
    не забудьте вызвать $("#mycontrolId").selectmenu('refresh');
  • 0
    @VladL То есть вы имеете в виду $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected"); ?
8

Если вы выпадаете из раскрывающегося списка Asp.Net, то ниже код будет работать нормально,

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

Но если ваш DropDown выпадал в HTML, этот код будет работать.

 $("#DropDownName")[0].selectedIndex=0;
2

Попытка:

jQuery("#availability option:selected").val();

Чтобы получить текст опции, используйте текст():

jQuery("#availability option:selected").text();

Дополнительная информация:

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />
  • 0
    Где часть "установить значение" в вашем ответе?
1

Есть много способов сделать это. вот некоторые из них:

$("._statusDDL").val('2');

ИЛИ

$('select').prop('selectedIndex', 3);

В этой статье существуют различные способы Выбрать значение drop down с помощью JQuery.

0

Вот функция, позволяющая быстро установить выбранную опцию:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Вызвать эту функцию с идентификатором элемента элемента и выбранным значением; например:

SetSelected('selectID','some option');

Это полезно, когда есть множество параметров выбора, которые нужно установить.

0

Если вы загрузите все <options ....></options> по вызову Ajax
Для этого выполните следующие действия.

1). Создайте отдельный метод для установки значения раскрывающегося списка
Для Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Вызовите этот метод, когда успех ajax-вызова завершает выполнение всей задачи добавления html

Для Ex:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}
0

Я думаю, это может помочь:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

Если вы сделаете так, добавьте элемент без текста. Итак, когда вы нажимаете на комбо, это не срабатывает, но значение -1 вы добавили позже, выбрав $( ". AutoCompleteDepartment" ). Val (-1); позволяют вам контролировать, имеет ли значение combo допустимое значение.

Надеюсь, что это поможет любому.

Извините за мой английский.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню