Evento de mudança de gatilho do menu suspenso

86

Eu quero acionar o evento de mudança do dropdown em $ (document) .ready usando jquery.

Tenho uma lista suspensa em cascata para país e estado na página de detalhes do usuário. como posso definir o valor (que é retirado do banco de dados com base na id do usuário) para país e estado em MVC com C #.

Prasad
fonte
Você pode querer colocar mais algumas tags, como javascript e jQuery para obter mais informações
xenon

Respostas:

185

Não conheço muito JQuery, mas ouvi dizer que permite disparar eventos nativos com esta sintaxe.

$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});

Você deve declarar o manipulador de eventos de mudança antes de chamar trigger () ou change (), caso contrário, ele não será disparado. Obrigado pela menção @LenielMacaferi.

Mais informações aqui .

Christophe Eblé
fonte
13
Você deve declarar o manipulador de eventos change antes de chamar trigger()ou mesmo change()conforme mostrado corretamente nesta resposta, ou seja, se o código do manipulador de eventos aparecer abaixo da chamada, nada acontece! :)
Leniel Maccaferri
3
@LenielMacaferi Obrigado por me economizar uma ou duas horas.
Frank Nocke
@Christophe Eblé & Leniel Macaferi, Muito obrigado. Christophe, você poderia adicionar o comentário de Leniel à sua resposta?
Zaxter
Usei .change () mas não tive sorte com o jquery 3.1.1, após esse post ele está acionando conforme o esperado.
Sorangwala Abbasali
Isso acaba em um loop infinito, a solução de todos para isso acaba em um loop.
Nathan McKaskle de
12

Experimente isto:

$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});

Defina o evento de mudança e acione-o imediatamente. Isso garante que o manipulador de eventos seja definido antes de chamá-lo.

Pode ser tarde para responder ao postador original, mas outra pessoa pode se beneficiar da notação abreviada, e isso segue o encadeamento de jQuery, etc.

encadeamento de jquery

mlnyc
fonte
7

Experimente isto:

$('#id').change();

Funciona para mim.

Em uma linha junto com a definição do valor: $('#id').val(16).change();

d.popov
fonte
3
$ ('# id'). val (16) .change (); fez isso por mim.
TomoMiha
1
Obrigado, @TomoMiha. Adicionado na resposta.
d.popov
2

Se você estiver tentando vincular menus suspensos, a melhor maneira de fazer isso é ter um script que retorne uma caixa de seleção pré-construída e uma chamada AJAX que o solicite.

Aqui está a documentação do método Ajax do jQuery, se você precisar.

$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});

Em seguida, tenha um intervalo em torno de sua caixa de seleção de estado com o id de "stateBoxHook"

xenônio
fonte
Tenho listas suspensas em cascata: <% = Html.DropDownList ("MyCountries", "--- Select Country ---")%> <% = Html.CascadingDropDownList ("MyStates", "MyCountries")%> Eu posso definir o valor de MyCountries como $ ("# MyCountries"). val ('<% = Model.CountryId%>'); em $ (document) .ready. Mas não consigo definir o valor para o estado, pois mostra apenas uma opção "Selecionar estado", que deve ser preenchida no evento país onchange, pois são menus suspensos em cascata. Este é o problema real.
Prasad
Ainda não tenho certeza do que você está procurando. Você está tentando conseguir um sistema em que selecionam um país e restringe a lista aos estados desse país? Se for esse o caso, você precisará ter uma chamada AJAX para o servidor e enviar o país selecionado e, em seguida, retornar uma lista de estados naquele país.
xenônio
Eu defini EUA como País e Alabama como Estado, que é uma lista suspensa em cascata, ao adicionar o perfil do usuário. E quando eu volto a essa página para Editar um campo, preciso que o País e o Estado sejam preenchidos com os valores que defini anteriormente. Não tenho nenhum problema em adicionar o perfil do usuário, quando eu volto para a página para Editar, eu sou capaz de definir o valor para a lista suspensa País e na lista suspensa de estado os valores não são preenchidos porque está em cascata que é preenchida com o valor do país mudança de evento. Para isso, preciso acionar o evento de mudança de país para que o estado seja preenchido e eu possa definir o estado
Prasad
Por que isso acontece? Você sabe qual é o país no momento do carregamento da página, portanto, pode renderizar a lista de seleção correta de estados com o estado correto selecionado. Quando você altera o país, a lista será recarregada de qualquer maneira.
xenon
1

alternativamente, você pode colocar o atributo onchange na própria lista suspensa, que onchange irá chamar certas funções jquery como esta.

<input type="dropdownlist" onchange="jqueryFunc()">

<script type="text/javascript">
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
</script>

espero que este te ajude, e por favor, note que este código é apenas um rascunho, não testado em nenhum ide. obrigado

Dave
fonte
Isso não aciona o evento de alteração quando a página é carregada pela primeira vez (de acordo com a pergunta de OP)
0

Por alguma razão, as outras jQuerysoluções fornecidas aqui funcionaram ao executar o script do console, no entanto, não funcionaram para mim quando acionadas a partir de Bookmarklets do Chrome .

Felizmente, esta solução Vanilla JS (a triggerChangeEventfunção) funcionou:

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see /programming/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent <select> element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () => {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}
<select id="fruit">
  <option value="">(select a fruit)</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<p>
  You have selected: <b id="result"></b>
</p>
<p>
  <input id="selector" placeholder="selector" value="option[value='banana']">
  <button onclick="runTest()">Trigger select!</button>
</p>

Domi
fonte