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


350

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

Ответы:


602
$("#mydropdownlist").val("thevalue");

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


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

21
Это не вызывает событие «изменение».
AGamePlayer

4
Требуется повторить - убедитесь, что у вас установлен атрибут «значение», иначе этот метод не будет работать. (Я помогал кому-то, кто показал мне это, и мне было интересно, почему он не выбирает текст в раскрывающемся списке.) Хотел убедиться, что это было ясно.
JasCav

1
+1 Пришлось позвонить, $("#mycontrolId").selectmenu('refresh');чтобы отразить изменения
VladL

Подробная информация по этой ссылке htmlgoodies.com/beyond/javascript/….
Niamath

52

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

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

Это установит его на первое значение в выпадающем списке.

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

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

$("#mydropdownlist").get(0).selectedIndex = index_here;

7
Теперь это не работает вообще, потому что у selectтега нет именованных атрибутов selectedIndex. Вместо этого это свойство объекта DOM. Следовательно код должен быть:$("#mydropdownlist").get(0).selectedIndex = index_here;
Хань

5
$("#mydropdownlist").prop('selectedIndex', index_here); Также работает.
numaroth

("#mydropdownlist"). get (0) .selectedIndex = index_here; этот способ работал !! @
kasim

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

действительно я чувствую некоторую пассивную агрессию в ответ
Dheeraj

50

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

$("#mydropdownlist").val("thevalue").change();

1
Большое спасибо, только одна строка, аккуратная и полезная, чтобы также вызвать событие change () для SelectBox, используя jQuery и Laravel Forms.
WhySoSerious

Это единственный ответ, в котором изменение действительно отображается в раскрывающемся списке. selectmenuне определено в моей версии jQuery, но change()делает свое дело.
Чед Хедккок

Спасибо. Это был единственный способ, которым это работало для меня (после попытки всего остального выше этого).
inspirednz

20

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

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

2
не забудьте позвонить$("#mycontrolId").selectmenu('refresh');
VladL

@VladL Так ты имеешь в виду $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Дилан Ченски

9

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

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

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

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

5

Лучший ответ на вопрос:

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

например:

$("#CityID").val(20).trigger("chosen:updated");

или

$("#CityID").val("chicago").trigger("chosen:updated");


2

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

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

ИЛИ

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

1
Ваш профиль показывает, что вы связаны со ссылкой, которую вы включили здесь. Ссылка на то, с чем вы связаны (например, на продукт или веб-сайт) без раскрытия этой принадлежности в вашем посте , считается спамом в Stack Exchange / Stack Overflow. Видите: Что означает «Хорошее» самореклама? , Некоторые советы и рекомендации о саморекламе , Что такое точное определение понятия «спам» для переполнения стека? и что делает что-то спамом .
Макьен,

1

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

    $.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);                                       
              }  
             );

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

Надеюсь, это кому-нибудь поможет.

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


1

Если вам просто нужно установить значение раскрывающегося списка, то лучше всего

$("#ID").val("2");

Если вам нужно запустить какой-либо сценарий после обновления значения раскрывающегося списка, например, если вы установили какое-либо событие onChange в раскрывающемся списке и хотите запустить его после обновления раскрывающегося списка, то вам нужно использовать вот так

$("#ID").val("2").change();

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). Создайте отдельный метод для заданного значения раскрывающегося списка.
Например:

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

2). Вызовите этот метод, когда вызов ajax завершится успешно.

Например:

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

0

Установить drop-down selectedзначение и обновить изменения

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Здесь мы сначала устанавливаем значение из Modelи затем обновляем его на выбранном


0

// Html формат выпадающего списка.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// Если вы хотите изменить выбранный элемент на test2, используя javascript. Попробуй это. // установить следующую опцию, которую вы хотите выбрать

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

0

Использование выделенного / проверенного ответа выше сработало для меня ... вот немного понимания. Я немного изменил при получении URL, но в основном я определяю URL в Javascript, а затем устанавливаю его с помощью ответа jquery сверху:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

0

Для людей, использующих Bootstrap, используйте $(#elementId').selectpicker('val','elementValue')вместо$('#elementId').val('elementValue') , так как последний не обновляет значение в пользовательском интерфейсе.

Примечание : четная .change()функция работает, как предложено выше в некоторых ответах, но вызывает $('#elementId').change(function(){ //do something })функцию.

Просто опубликовать это там для людей, ссылающихся на эту ветку в будущем.

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