Attivare l'evento di modifica dell'elenco a discesa

Voglio attivare l'evento di modifica del menu a discesa in $ (documento). Già utilizzando jquery.

Ho un menu a discesa a cascata per paese e stato nella pagina dei dettagli dell'utente. come posso impostare il valore (che viene preso dal DB in base all'ID utente) per il paese e lo stato in MVC con C #.

Non conosco molto JQuery ma ho sentito che consente di attivare eventi nativi con questa sintassi.

$(document).ready(function(){

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

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

Devi dichiarare il gestore dell'evento change prima di chiamare trigger () o change () altrimenti non verrà attivato. Grazie per la menzione @LenielMacaferi.

Maggiori informazioni qui .

Prova questo:

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

Definisci l'evento di modifica e attivalo immediatamente. Ciò garantisce che il gestore eventi sia definito prima di chiamarlo.

Potrebbe essere tardi per rispondere al poster originale, ma qualcun altro potrebbe beneficiare della notazione abbreviata, e questo segue il concatenamento di jQuery, ecc.

jquery chaining

Prova questo:

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

Per me va bene.

Su una riga insieme all'impostazione del valore: $('#id').val(16).change();

Se stai cercando di avere elenchi a discesa collegati, il modo migliore per farlo è avere uno script che restituisca una casella di selezione precostruita e una chiamata AJAX che lo richiede.

Ecco la documentazione per il metodo Ajax di jQuery se ne hai bisogno.

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

});

Quindi fai un intervallo intorno alla casella di selezione dello stato con l'ID di "stateBoxHook"

in alternativa puoi mettere l'attributo onchange nell'elenco a discesa stesso, che onchange chiamerà determinate funzioni jquery come questa.

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

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

spero che questo ti aiuti, e tieni presente che questo codice è solo una bozza approssimativa, non testato su alcun ide. Grazie

Per qualche motivo, le altre jQuerysoluzioni fornite qui hanno funzionato durante l'esecuzione dello script dalla console, tuttavia, non ha funzionato per me quando attivato da Chrome Bookmarklet .

Fortunatamente, questa soluzione Vanilla JS (la triggerChangeEventfunzione) ha funzionato:

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