Click-Ereignis auf wählen Sie die Option Element in Chrom

Question

Ich habe ein Problem in Chrome mit den folgenden:

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

items.each(function(){ 

    $(this).click(function(){ 

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

Das click Ereignis nicht in Chrome Feuer scheint, funktioniert aber in Firefox.

Ich möchte in der Lage click auf einem option Element aus einer Kombination, wenn ich stattdessen eine andere Art von Element, sagen wir <li> es funktioniert gut. Irgendwelche Ideen? Vielen Dank.

Answer 1

Ich glaube nicht, dass das Klickereignis für Optionen gültig ist. Es gilt jedoch für ausgewählte Elemente. Geben Sie diesem einen Versuch:

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

Answer 2

Wir können diese andere Art und Weise erreichen, trotz der direkten Aufruf Veranstaltung mit <select>.

JS Teil:

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

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

HTML-Teil:

<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

Was in der Regel funktioniert für mich ist es, zunächst den Wert der Dropdown zu ändern, z.B.

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

und dann lösen die eine Änderung

$('#selectorForOption').changed()

Auf diese Weise jede Javascript, die

Answer 4

Vielleicht eine der neuen jquery Versionen unterstützt das Click-Ereignis auf Optionen verdrahtet . Er arbeitet für mich:

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

UPDATE: Eine mögliche usecase des folgenden sein könnte: Ein Benutzer sendet ein HTML-Formular und die Werte werden in eine Datenbank eingefügt. Es sind jedoch standardmäßig ein oder mehrere Werte festgelegt, und Sie markieren diese automatisierten Einträge. Sie zeigen dem Benutzer auch an, dass sein Eintrag automatisch generiert wird. Wenn er jedoch die Eingabe bestätigt, indem er auf die bereits ausgewählte Option klickt, ändern Sie das Kennzeichen in der Datenbank. Eine seltene sue Fall aber möglich ...

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

ich, dass das für mich folgende arbeitete gefunden - statt auf, klicken Sie auf, verwenden Sie auf Änderung zB:

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

     //your code here 

})); 

Answer 7

Ich weiß, dass dieser Code-Schnipsel funktioniert, um einen Optionsklick zu erkennen (zumindest in Chrome und FF). Außerdem funktioniert es, wenn das Element nicht bei der DOM-Ladung vorhanden war. Ich benutze das normalerweise, wenn ich Abschnitte von Eingängen in ein einzelnes select-Element einfüge, und ich möchte nicht, dass der Abschnittstitel angeklickt wird.

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

Answer 8

Ich hatte ähnliches Problem. 10 Ereignis war nicht gut für mich, weil ich einige Daten aktualisieren musste, wenn der Benutzer auf option klickt.Nach einigen Versuchen habe ich diese Lösung bekam:

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

Ich bin damit einverstanden, dass diese sehr hässlich ist, und Sie sollten mit change Ereignis bleiben, wo können Sie, aber das ist mein Problem gelöst.

Answer 9

Da $(this) ist nicht mehr korrekt mit ES6 Pfeil-Funktion, die nicht über die gleichen this als function() {} haben, sollten Sie nicht mehr als $ (this) verwenden, wenn Sie ES6 Syntax verwenden.
Außerdem nach der offiziellen jQuery anwser gibt es eine einfachere Möglichkeit, das zu tun, was die Top-Antwort sagt.
Der beste Weg, um den HTML-Code einer ausgewählten Option zu erhalten, ist

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

Sie verwenden können html() ersetzen durch text() oder irgendetwas anderes wollen Sie (aber html() in der ursprünglichen Frage war).
Fügen Sie einfach den Ereignis-Listener mit der Kurzschreibmethode change() von jQuery hinzu, um Ihren Code auszulösen, wenn sich die ausgewählte Option ändert.

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

Wenn Sie nur den Wert der option:selected wollen wissen Sie gerade (die Option, dass der Benutzer gewählt hat) $('#yourSelect').val()

Answer 10

Der einfache Weg, die Auswahl ändern können, und aktualisieren Sie es das ist.

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

ein weiteres Beispiel:

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

ein weiteres Beispiel:

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

Answer 11

Umgehung:

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

Answer 12

für diese Suche auf 2018. Das Click-Ereignis auf dem Options-Tag in einem ausgewählten Tag wird in Chrome nicht ausgelöst.

Verwenden Änderungsereignis, und erfassen die gewählte Option:

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

Beachten Sie, dass $ target eine Sammlung von Objekten sein, wenn die select-Tag mehrere ist.