Como posso definir o valor de um DropDownList usando jQuery?

349

Como a pergunta diz, como faço para definir o valor de um controle DropDownList usando jQuery?

carne
fonte

Respostas:

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

apenas verifique se o valor nas tags de opções corresponde ao valor no método val.

Nick Berardi
fonte
Eu tenho um validador de intervalo em uma lista suspensa e estou definindo o valor da lista suspensa conforme descrito acima, mas o validador de intervalo continua falhando, dizendo para selecionar um valor (quando o valor selecionado está dentro do intervalo). Por favor, veja a minha pergunta stackoverflow.com/questions/3165033/...
James
21
Isso não aciona o evento "change".
AGamePlayer
4
Queria reiterar - verifique se você tem o atributo "value" definido, ou esse método não funcionará. (Eu estava ajudando alguém que me mostrou isso e queria saber por que não estava selecionando o texto na lista suspensa.) Queria ter certeza de que isso estava claro.
JasCav
11
+1 Tive que chamar $("#mycontrolId").selectmenu('refresh');para refletir as mudanças
VladL
informações detalhadas neste link htmlgoodies.com/beyond/javascript/…
Niamath 6/18
52

Se você estiver trabalhando com o índice, poderá definir o índice selecionado diretamente com .attr ():

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

Isso o definirá como o primeiro valor na lista suspensa.

Edit: A maneira como eu fiz isso acima costumava funcionar. Mas parece que não existe mais.

Mas, como Han agradavelmente aponta nos comentários, a maneira correta de fazer isso é:

$("#mydropdownlist").get(0).selectedIndex = index_here;
Mattsson
fonte
7
Agora, isso não funciona porque a selecttag não tem nenhum atributo chamado selectedIndex. É uma propriedade do objeto DOM. Portanto, o código deve ser:$("#mydropdownlist").get(0).selectedIndex = index_here;
Han
5
$("#mydropdownlist").prop('selectedIndex', index_here); Também funciona.
Numaroth 13/08/14
("#mydropdownlist"). get (0) .selectedIndex = index_here; dessa maneira
funcionou
Ótima maneira de alteração selecionada em suspenso, obrigado
Avtandil Kavrelishvili
posso sentir alguma agressão passiva na resposta
Dheeraj
49

Conforme sugerido por @Nick Berardi, se o valor alterado não estiver refletido no front end da interface do usuário, tente:

$("#mydropdownlist").val("thevalue").change();
IRSHAD
fonte
11
muito obrigado, apenas uma linha, elegante e útil para também aumentar o evento change () de um SelectBox usando jQuery e Laravel Forms.
WhySoSerious
Esta é a única resposta em que a alteração foi realmente exibida no menu suspenso. selectmenué indefinido na minha versão do jQuery, mas change()faz o truque.
Chad Hedgcock 6/06/2018
Obrigado. Esta foi a única maneira que funcionou para mim (depois de tentar tudo o mais acima disso).
inspirednz
20

Tente esta abordagem muito simples:

/*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
fonte
2
não esqueça de ligar #$("#mycontrolId").selectmenu('refresh');
VladL Vlad 15/11
@VladL Então você quer dizer $('#mycontrolId').selectmenu('refresh').val(myvalue).attr("selected", "selected");?
Dylan Czenski
9

Se o menu suspenso for Asp.Net, o código abaixo funcionará bem,

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

Mas se o seu DropDown for HTML, esse código funcionará.

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

Melhor resposta para a pergunta:

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

por exemplo:

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

ou

$("#CityID").val("chicago").trigger("chosen:updated");
Asif Ramzan
fonte
3

definir valor e atualizar evento da lista suspensa

$("#id").val("1234").change();
Jignesh Joisar
fonte
2

Existem várias maneiras de fazer isso. Aqui estão alguns deles:

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

OU

$('select').prop('selectedIndex', 3);
Dilip Kumar Yadav
fonte
11
Seu perfil indica que você está associado ao link que você incluiu aqui. Vincular a algo ao qual você é afiliado (por exemplo, um produto ou site) sem revelar que a afiliação em sua postagem é considerada spam no Stack Exchange / Stack Overflow. Veja: O que significa "boa" autopromoção? , algumas dicas e conselhos sobre autopromoção . Qual é a definição exata de "spam" para Stack Overflow? e O que faz com que algo seja spam .
Makyen 29/04/19
1

Eu acho que isso pode ajudar:

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

Se você fizer dessa maneira, você adiciona um elemento sem texto. Portanto, quando você clica no combo, ele não aparece, mas o valor -1 que você adicionou posteriormente seleciona com $ (". AutoCompleteDepartment"). Val (-1); permite controlar se o combo tem um valor válido.

Espero que ajude alguém.

Desculpe pelo meu Inglês.

JapineJ
fonte
1

Se você só precisa definir o valor de uma lista suspensa, a melhor maneira é

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

Se você precisar acionar qualquer script após atualizar o valor suspenso, como Se você configurou algum evento onChange no menu suspenso, e desejar executá-lo após atualizar o menu suspenso, precisará usar assim

$("#ID").val("2").change();
Mannu saraswat
fonte
0

Aqui está uma função criada para definir rapidamente a opção selecionada:

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

Chame essa função com o ID do elemento do argumento e o valor selecionado; como isso:

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

É útil quando há muitas opções de seleção a serem definidas.

vishwakarma09
fonte
0

Caso você carregue tudo <options ....></options>pela chamada do Ajax
Siga estas etapas para fazer isso.

1) Crie um método separado para o valor definido do menu suspenso
Para Ex:

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

2) Chame esse método quando ajax chamar com êxito toda a tarefa de anexação html concluída

Para Ex:

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

Definir drop-down selectedvalor e atualizar alterações

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

Aqui, primeiro definimos o valor Modele depois atualizamos o valor escolhido

Deepak Tambe
fonte
0

// Html Formato da lista suspensa.

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

// Se você deseja alterar o item selecionado para test2 usando javascript. Tente este. // define a próxima opção que você deseja selecionar

var NewOprionValue = "Test2"

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

Usando a resposta destacada / marcada acima funcionou para mim ... aqui está uma pequena visão. Eu trapacei um pouco em obter o URL, mas basicamente estou definindo o URL no Javascript e, em seguida, definindo-o através da resposta jquery acima:

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

fonte
0

Para pessoas que usam o Bootstrap, use em $(#elementId').selectpicker('val','elementValue')vez de $('#elementId').val('elementValue'), pois o último não atualiza o valor na interface do usuário.

Nota : A .change()função Even funciona, conforme sugerido acima em algumas respostas, mas dispara a $('#elementId').change(function(){ //do something })função.

Basta postar isso lá fora, para as pessoas que fazem referência a esse segmento no futuro.

Tejas Joshi
fonte