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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

например:

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

или

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

установить значение и обновить выпадающий список событий

$("#id").val("1234").change();

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

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

ИЛИ

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

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

    $.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); позволяет вам контролировать, если комбо имеет допустимое значение.

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

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

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

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

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

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

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

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');

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

В случае, если вы загрузите все <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)
}

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

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

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

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

Использование выделенного / проверенного ответа выше сработало для меня ... вот немного понимания. Я немного изменил при получении 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>

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

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

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