Jak ustawić wartość DropDownList za pomocą jQuery?

349

Jak mówi pytanie, jak ustawić wartość kontrolki DropDownList za pomocą jQuery?

ciało
źródło

Odpowiedzi:

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

upewnij się tylko, że wartość w tagach opcji odpowiada wartości w metodzie val.

Nick Berardi
źródło
Mam walidator zakresu w stosunku do listy rozwijanej i ustawiam wartość listy rozwijanej, jak opisano powyżej, ale walidator zakresu wciąż nie wyświetla polecenia wyboru (gdy wybrana wartość mieści się w zakresie). Proszę zobaczyć moje pytanie stackoverflow.com/questions/3165033/…
James
21
To nie wywołuje zdarzenia „zmień”.
AGamePlayer
4
Chciałem powtórzyć - upewnij się, że masz ustawiony atrybut „wartość”, w przeciwnym razie ta metoda nie będzie działać. (Pomagałem komuś, kto mi to pokazał i zastanawiałem się, dlaczego nie wybrał tego za pomocą tekstu z listy rozwijanej.) Chciałem się upewnić, że to jasne.
JasCav,
1
+1 Musiałem zadzwonić, $("#mycontrolId").selectmenu('refresh');aby odzwierciedlić zmiany
VladL
szczegółowe informacje pod tym linkiem htmlgoodies.com/beyond/javascript/…
Niamath
52

Jeśli pracujesz z indeksem, możesz ustawić wybrany indeks bezpośrednio za pomocą .attr ():

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

Spowoduje to ustawienie pierwszej wartości na liście rozwijanej.

Edycja: Tak jak wcześniej to robiłem. Ale wydaje się, że już nie.

Ale jak Han tak miło podkreśla w komentarzach, poprawnym sposobem jest:

$("#mydropdownlist").get(0).selectedIndex = index_here;
mattsson
źródło
7
Teraz to w ogóle nie działa, ponieważ selecttag nie ma żadnego nazwanego atrybutu selectedIndex. Zamiast tego jest właściwością obiektu DOM. Dlatego kod powinien wyglądać następująco:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han
5
$("#mydropdownlist").prop('selectedIndex', index_here); Działa również.
numaroth
(„#mydropdownlist”). get (0) .selectedIndex = index_here; w ten sposób działało !! @
kasim
Świetny sposób na zmianę wybranych w menu rozwijanym, dziękuję
Avtandil Kavrelishvili,
czy wyczuwam w odpowiedzi jakąś pasywną agresję
Dheeraj,
49

Zgodnie z sugestią @Nick Berardi, jeśli zmieniona wartość nie jest odzwierciedlona w interfejsie użytkownika, spróbuj:

$("#mydropdownlist").val("thevalue").change();
IRSHAD
źródło
1
wielkie dzięki, tylko jedna linia, schludna i pomocna, aby również podnieść zdarzenie change () SelectBox za pomocą jQuery i Laravel Forms.
WhySoSerious
To jedyna odpowiedź, w której zmiana faktycznie pokazała się w menu rozwijanym. selectmenujest niezdefiniowany w mojej wersji jQuery, ale change()załatwia sprawę.
Chad Hedgcock
Dzięki. To był dla mnie jedyny sposób (po wypróbowaniu wszystkiego innego powyżej).
inspirnz
20

Wypróbuj to bardzo proste podejście:

/*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");
Clyde
źródło
2
nie zapomnij zadzwonić$("#mycontrolId").selectmenu('refresh');
VladL
@VladL Masz na myśli $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski
9

Jeśli lista rozwijana to Asp.Net, poniższy kod będzie działał dobrze,

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

Ale jeśli Twój DropDown to HTML, ten kod będzie działał.

 $("#DropDownName")[0].selectedIndex=0;
salah9
źródło
5

Najlepsza odpowiedź na pytanie:

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

na przykład:

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

lub

$("#CityID").val("chicago").trigger("chosen:updated");
Asif Ramzan
źródło
3

ustaw wartość i aktualizuj listę rozwijaną zdarzeń

$("#id").val("1234").change();
Jignesh Joisar
źródło
2

Można to zrobić na wiele sposobów. tutaj jest kilka z nich:

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

LUB

$('select').prop('selectedIndex', 3);
Dilip Kumar Yadav
źródło
1
Twój profil wskazuje, że jesteś powiązany z linkiem, który tu umieściłeś. Łączenie z czymś, z czym jesteś powiązany (np. Produktem lub witryną) bez ujawnienia, że ​​powiązanie w twoim poście jest uważane za spam w Stack Exchange / Stack Overflow. Zobacz: Co oznacza „dobra” autopromocja? , Kilka wskazówek i porad na temat autopromocji , Jaka jest dokładna definicja „spam” na przepełnienie stosu? i Co powoduje, że coś jest spamem .
Makyen
1

Myślę, że to może pomóc:

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

Jeśli to zrobisz, dodasz element bez tekstu. Tak więc, kiedy klikniesz de combo, nie pojawi się, ale wartość -1 dodałeś później za pomocą $ (". AutoCompleteDepartment"). Val (-1); pozwala kontrolować, czy kombinacja ma prawidłową wartość.

Mam nadzieję, że to pomoże każdemu.

Przepraszam za mój angielski.

JapineJ
źródło
1

Jeśli potrzebujesz tylko ustawić wartość listy rozwijanej, najlepszym rozwiązaniem jest

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

Jeśli musisz uruchomić dowolny skrypt po zaktualizowaniu wartości rozwijanej, np. Jeśli ustawisz dowolne zdarzenie onChange w menu rozwijanym i chcesz uruchomić to po aktualizacji listy rozwijanej, musisz użyć tego w ten sposób

$("#ID").val("2").change();
Mannu saraswat
źródło
0

Oto funkcja umożliwiająca szybkie ustawienie wybranej opcji:

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

Wywołaj tę funkcję z identyfikatorem elementu argumentu i wybraną wartością; lubię to:

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

Jest to przydatne, gdy trzeba ustawić wiele opcji wyboru.

vishwakarma09
źródło
0

W przypadku, gdy ładujesz wszystko <options ....></options>przez Ajax,
wykonaj następujące czynności, aby to zrobić.

1). Utwórz osobną metodę dla ustawionej wartości listy rozwijanej
Dla np .:

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

2). Wywołaj tę metodę, gdy zakończy się powodzeniem wywołania ajax wszystkie zadania dołączania html zakończone

Na przykład:

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

Ustaw drop-down selectedwartość i zaktualizuj zmiany

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

Tutaj najpierw ustawiamy wartość, Modela następnie aktualizujemy ją na wybranych

Deepak Tambe
źródło
0

// Html Format listy rozwijanej.

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

// Jeśli chcesz zmienić wybrany element na test2 za pomocą javascript. Spróbuj tego. // ustaw następną opcję, którą chcesz wybrać

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);
Sikha
źródło
0

Korzystanie z podświetlonej / zaznaczonej odpowiedzi powyżej działało dla mnie ... oto mały wgląd. Trochę oszukiwałem podczas uzyskiwania adresu URL, ale w zasadzie definiuję adres URL w JavaScript, a następnie ustawiam go za pomocą odpowiedzi jquery z góry:

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

źródło
0

Dla osób używających Bootstrap, użyj $(#elementId').selectpicker('val','elementValue')zamiast $('#elementId').val('elementValue'), ponieważ ten ostatni nie aktualizuje wartości w interfejsie użytkownika.

Uwaga : Nawet .change()funkcja działa, jak sugerowano powyżej w niektórych odpowiedziach, ale wyzwala $('#elementId').change(function(){ //do something })funkcję.

Po prostu opublikuj to tutaj dla osób odwołujących się do tego wątku w przyszłości.

Tejas Joshi
źródło