Evento incendio ogni volta che viene selezionato un object DropDownList con jQuery

Ho un menu a discesa:

nel mio jQuery, assegno un evento di modifica come questo:

 $('#dropdownid').change(function() {......}); 

Ora, funziona quando seleziono un valore diverso dal menu a discesa, tuttavia diciamo che desidero selezionare nuovamente lo stesso valore. (perché voglio fare un’altra chiamata con lo stesso valore) Quindi, quando lo seleziono di nuovo, (senza modificare il valore) semplicemente facendo clic sul valore selezionato dal menu a discesa e “selezionando” nuovamente, nessun evento si triggers. C’è un altro evento in jQuery che devo assegnare ad esso? qual è la soluzione?

Per espandere il suggerimento di Vincent Ramdhanie , dai un’occhiata a fare qualcosa di simile. In sostanza, si finisce con la propria funzione jQuery che è ansible riutilizzare altrove.

Passaggio 1 : creare la funzione jQuery

 (function($) { $.fn.selected = function(fn) { return this.each(function() { var clicknum = 0; $(this).click(function() { clicknum++; if (clicknum == 2) { clicknum = 0; fn(this); } }); }); } })(jQuery); 

Passaggio 2 : assicurarsi che il file della funzione jQuery appena creato sia referenziato per l’uso:

  

Passaggio 3 : utilizzare la nuova funzione:

 $('#MyDropDown').selected(function() { //Do Whatever... }); 

INFO ORIGINALI
Con il tuo codice attuale, selezionando lo stesso valore dall’asp: DropDownList non genererà l’evento change.

Potresti provare ad aggiungere un’altra funzione jQuery per l’evento .blur. Ciò si triggers quando il controllo perde il focus:

 $('#dropdownid').blur(function() {......}); 

Se la funzione di sfocatura non funziona per te, aggiungerei un pulsante di aggiornamento o qualcosa a cui influire che triggers la funzione che stai tentando di utilizzare.

Prova questo:

 $(document).ready(function(){ var clicknum = 0; $("#dropdownid").click(function(){ clicknum++; if(clicknum == 2){ alert($(this).val()); clicknum = 0; } }); }); 

Innanzitutto, stai creando un clicknum variabile per tenere traccia del numero di clic perché non vuoi che l’evento si attivi ogni volta che l’utente fa clic sulla casella a discesa. Il secondo clic è la selezione effettuata dall’utente.

Se clic num risulta essere 2, questo è un secondo clic, quindi triggers l’evento e reimposta il numero su 0 per la volta successiva. Altrimenti non fare nulla.

È sufficiente colbind i gestori di eventi di clic ai controlli delle opzioni racchiusi anziché selezionare:

 $('#dropdownid option').click(function() {......}); 

Questo sparerà solo quando selezioni un’opzione dal menu a discesa, indipendentemente dal fatto che cambi.

Secondo l’ API :

L’evento change si triggers quando un controllo perde lo stato attivo di input e il suo valore è stato modificato da quando ha ottenuto il focus.

Potresti voler provare il mouse o cliccare eventi in alternativa.

Molte delle soluzioni attuali si romperanno in molte situazioni. Qualsiasi soluzione che si basa sul controllo del conteggio dei clic due volte sarà molto volubile.

Alcuni scenari da considerare:

  • Se fai clic su, poi su off, poi di nuovo su, conterà entrambi i clic e il fuoco.
  • In Firefox, puoi aprire il menu con un singolo clic del mouse e trascinare fino all’opzione scelta senza mai sollevare il mouse.
  • Se utilizzi una qualsiasi combinazione di tratti della tastiera, è probabile che il contatore dei clic non venga sincronizzato o che manchi completamente l’evento di modifica.
    • Puoi aprire il menu a discesa con Alt + (o la barra spaziatrice in Chrome e Opera).
    • Quando il menu a discesa è attivo, qualsiasi tasto freccia cambierà la selezione
    • Quando il menu a discesa è aperto, facendo clic su Tab o Invio verrà effettuata una selezione

Ecco un’estensione più completa:

Il modo più efficace per vedere se è stata selezionata un’opzione è utilizzare l’evento change , che puoi gestire con il gestore .change() di jQuery.

L’unica cosa che rimane da fare è determinare se l’elemento originale è stato selezionato di nuovo.
Questo è stato chiesto molto ( uno , due , tre ) senza una grande risposta in ogni situazione.

La cosa più semplice da fare sarebbe controllare se ci fosse un click o un evento keyup option:selected elemento option:selected MA Chrome, IE e Safari non sembrano supportare eventi sugli elementi option , anche se sono nel w3c raccomandazione

All’interno dell’elemento Select sembra essere una scatola nera. Se ascolti eventi su di esso, non puoi nemmeno dire su quale elemento si è verificato l’evento o se l’elenco era aperto o meno.

La prossima cosa migliore quindi, sembra gestire l’evento di blur . Ciò indica che l’utente si è concentrato sul menu a discesa (forse ha visto la lista, forse no) e ha preso una decisione che vorrebbero attenersi al valore originale. Per continuare a gestire le modifiche fin da subito, continueremo a iscriversi all’evento di change . E per assicurarti di non raddoppiare il numero, imposteremo una bandiera se l’evento di modifica è stato innalzato, in modo che non spariamo due volte:

Codice:

 (function ($) { $.fn.selected = function (fn) { return this.each(function () { $(this).focus(function () { this.dataChanged = false; }).change(function () { this.dataChanged = true; fn(this); }).blur(function (e) { if (!this.dataChanged) { fn(this); } }); }); }; })(jQuery); 

Quindi chiama in questo modo:

 $("#dropdownid").selected(function (e) { alert('You selected ' + $(e).val()); }); 

Esempio aggiornato in jsFiddle

Dai un’occhiata a questa soluzione:
http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

 $(document).ready(function () { // select all the divs and make it invisible $("div.Content").css("display", "none"); // Find all the combos inside the table or gridview $("#tblItems").find("select.Status").each(function () { // Attached function to the change event of each combo $(this).change(function () { if ($(this).val() == "test1") { // Change the visibility of the next div after the selected combo if the selected value = test1 $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block"); } else { $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none"); } }); }); }); 

Spero che questo ti aiuti

Questo problema che si sta verificando è dovuto alla gestione del codice HTML di selezione da parte del client. Dal momento che la maggior parte dei client non ha intenzione di contrassegnare un non-cambiamento, dovrai provare qualcosa di diverso.

Probabilmente aggiungerei un pulsante “Aggiorna” o qualcosa del genere ma sono uno sviluppatore e non un designer quindi probabilmente ho torto. 🙂

L’elemento selezionato di un menu a discesa è lì per riflettere una scelta già effettuata.

Il mio suggerimento è di reimpostare il menu a discesa su un valore predefinito come “Seleziona …”, ogni volta che viene completata un’azione richiesta. Pertanto, se l’utente deve eseguire l’azione A due volte, il menu a discesa viene ripristinato dopo ogni azione.

  1. L’utente seleziona l’azione A dal menu a discesa.
  2. L’azione A viene eseguita e il menu a discesa viene ripristinato.
  3. L’utente seleziona l’azione A dal menu a discesa.
  4. L’azione A viene eseguita e il menu a discesa viene ripristinato.

Spero che questo ti aiuti,

Ricco

Per me la seguente soluzione ha funzionato bene:

 $("#dropdownid select").click(function() { alert($("#dropdownid select option:selected").html()); }); 

Anche:

 $('#dropdownid select option').click(function() { .... }