evento Click su Seleziona elemento opzione in cromo

Question

Sto avendo un problema in Chrome con il seguente:

var items = $("option", obj); 

items.each(function(){ 

    $(this).click(function(){ 

     // alert("test"); 
     process($(this).html()); 
     return false; 
    }); 
}); 

L'evento click non sembra al fuoco Chrome, ma lavora a Firefox.

Voglio essere in grado di click su un elemento option da una combo, se faccio invece un altro tipo di elemento, diciamo <li> funziona bene. Qualche idea? Grazie.

Answer 1

Non credo che l'evento click sia valido sulle opzioni. È valido, tuttavia, su elementi selezionati. Dare una prova:

$("select#yourSelect").change(function(){ 
    process($(this).children(":selected").html()); 
}); 

Answer 2

possiamo raggiungere questo altro modo, nonostante di chiamare direttamente evento con <select>.

JS parte: parte

$("#sort").change(function(){ 

    alert('Selected value: ' + $(this).val()); 
}); 

HTML:

<select id="sort"> 
    <option value="1">View All</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
    <option value="4">Last Modified</option> 
    <option value="5">Ranking</option> 
    <option value="6">Reviewed</option> 
</select> 

Answer 3

Ciò che di solito funziona per me è quello di cambiare prima il valore del menu a discesa, ad esempio,

$('#selectorForOption').attr('selected','selected')

e quindi innescare il cambiamento

$('#selectorForOption').changed()

In questo modo, qualsiasi javascript che viene collegato al

Answer 4

Forse una delle nuove versioni di jQuery supporta l'evento click sulle opzioni . Ha funzionato per me:

$(document).on("click","select option",function() { 
    console.log("nice to meet you, console ;-)"); 
}); 

AGGIORNAMENTO: Un possibile caso d'uso potrebbe essere la seguente: un utente invia un modulo HTML ei valori vengono inseriti in un database. Tuttavia uno o più valori sono impostati per impostazione predefinita e si contrassegnano queste voci automatizzate. Si mostra anche all'utente che la sua voce viene generata automaticamente, ma se conferma la voce facendo clic sull'opzione già selezionata, si modifica la bandiera nel database. Un raro caso citare in giudizio, ma possibile ...

Answer 5

<select id="myselect"> 
    <option value="0">sometext</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
</select> 

$('#myselect').change(function() { 
    if($('#myselect option:selected').val() == 0) { 
    ... 
    } 
    else { 
    ... 
    } 
}); 

Answer 6

ho scoperto che le seguenti ha lavorato per me - invece di utilizzare al clic, usano il cambiamento per esempio:

jQuery('#element select').on('change', (function() { 

     //your code here 

})); 

Answer 7

So che questo frammento di codice funziona per riconoscere un'opzione clic (almeno in Chrome e FF). Inoltre, funziona se l'elemento non era presente sul carico DOM. Di solito uso questo quando inserisco sezioni di input in un singolo elemento select e non voglio che il titolo della sezione venga cliccato.

$(document).on('click', 'option[value="disableme"]', function(){ 
    $('option[value="disableme"]').prop("selected", false); 
}); 

Answer 8

Ho riscontrato un problema simile. L'evento change non mi ha aiutato perché ho bisogno di aggiornare alcuni dati quando l'utente fa clic su option.Dopo alcune prove ho questa soluzione:

$('select').on('click',function(ev){ 
    if(ev.offsetY < 0){ 
     //user click on option 
    }else{ 
     //dropdown is shown 
    } 
}); 

sono d'accordo che questo è molto brutto e si dovrebbe attaccare con change evento dove è possibile, ma questo risolto il mio problema.

Answer 9

Dal $(this) non è più corretto con la funzione freccia ES6 che non hanno hanno lo stesso this di function() {}, non si dovrebbe usare $ (questo) se si utilizza la sintassi ES6.
Inoltre, secondo il jQuery ufficiale anwser, c'è un modo più semplice per farlo che dice la risposta in alto.
Il modo migliore per ottenere il codice HTML di un'opzione selezionata è quello di utilizzare

$('#yourSelect option:selected').html(); 

È possibile sostituire html() da text() o qualsiasi altra cosa che si desidera (ma html() era nella domanda iniziale).
Basta aggiungere l'ascoltatore di eventi change, con il metodo stenografico di jQuery change(), per attivare il codice quando l'opzione selezionata cambia.

$ ('#yourSelect').change(() => { 
    process($('#yourSelect option:selected').html()); 
    }); 

Se si desidera solo conoscere il valore del option:selected (l'opzione che l'utente ha scelto) si può semplicemente utilizzare $('#yourSelect').val()

Answer 10

Il modo più semplice per cambiare la selezione e l'aggiornamento è questo.

// BY id 
$('#select_element_selector').val('value').change(); 

un altro esempio:

//By tag 
$('[name=selectxD]').val('value').change(); 

un altro esempio:

$("#select_element_selector").val('value').trigger('chosen:updated'); 

Answer 11

Soluzione:

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

Answer 12

ricerca di questo su 2018. L'evento Click sul tag dell'opzione, all'interno di un tag select, non viene attivato su Chrome.

Usa cambiamento evento, e catturare l'opzione selezionata:

$(document).delegate("select", "change", function() { 
    //capture the option 
    var $target = $("option:selected",$(this)); 
}); 

essere consapevoli del fatto che $ bersaglio può essere una collezione di oggetti se il tag select è multipla.