Як я можу встановити значення DropDownList за допомогою jQuery?


349

Як йдеться в запитанні, як я можу встановити значення елемента DropDownList за допомогою jQuery?

Відповіді:


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

просто переконайтесь, що значення в тегах параметрів відповідає значенню методу val.


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

21
Це не запускає подію "зміни".
AGamePlayer

4
Хотів повторити - переконайтеся, що у вас встановлений атрибут "value", інакше цей метод не працюватиме. (Я допомагав тому, хто мені це показав, і цікавився, чому його не вибрали через текст у спадному списку.) Хотіла переконатися, що це було зрозуміло.
JasCav

1
+1 Довелося зателефонувати, $("#mycontrolId").selectmenu('refresh');щоб відобразити зміни
VladL

детальна інформація за цим посиланням htmlgoodies.com/beyond/javascript/…
Niamath

52

Якщо ви працюєте з індексом, ви можете встановити вибраний індекс безпосередньо за допомогою .attr ():

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

Це встановить його першим значенням у списку, що випадає.

Редагувати: Як я це робив вище, раніше працював. Але здається, що це більше не відбувається.

Але, як Хан так приємно вказує в коментарях, правильний спосіб зробити це:

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

49

Як запропонував @ Nick Berardi, якщо змінене значення не відображається на передньому кінці інтерфейсу користувача, спробуйте:

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

1
велике спасибі, лише один рядок, акуратний і корисний, щоб також підняти подію зміни () SelectBox за допомогою форм jQuery та Laravel.
WhySoSerious

Це єдина відповідь, де зміна насправді виявилась у спадному меню. selectmenuу моїй версії jQuery change()не визначено , але робить трюк.
Чад Хеджкок

Дякую. Це був єдиний спосіб, який він працював для мене (після того, як спробувати все інше вище цього).
надихнула

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
Ваш профіль вказує, що ви пов’язані із посиланням, яке ви включили сюди. Посилання на те, з чим ви пов’язані (наприклад, на продукт чи веб-сайт), не розкриваючи приналежність до своєї публікації , вважається спамом під час обміну стека / переповнення стека. Дивіться: Що означає "хороша" самореклама? , Деякі поради і рекомендації про саморекламу , Що таке точне визначення поняття «спам» для переповнення стека? , і Що робить щось спамом .
Макіен

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

Якщо ви зробите це так, ви додасте елемент без тексту. Отже, коли ви клацаєте де комбо, воно не з’являється, але значення -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 call
Виконайте ці кроки, щоб зробити це.

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

Встановити 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.