2013-11-27 16 views
6

Der Titel scheint verwirrend, aber was ich tun möchte, ist ...Wie bereits Option ausgewählt RESELECT

Ich weiß, wie nur zu behandeln, wenn der Benutzer mit dieser neuen Option wählen - $('select').change(function(){}) .`

Aber nicht wenn der Benutzer die bereits ausgewählte Option auswählen möchte.

Ich habe auch versucht mit radio aber die gleiche Sache.

Okay zum Beispiel habe ich eine Auswahl mit einer Option (rot, blau, grün).

<select> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="green">GREEN</option> 
</select> 

und ich habe dieses Skript:

$('select').change(function(){ 
    var val = $(this).val(); 
    alert(val); 
}); 

Als ich Option ‚blue‘ wählen sie alarmiert Wert ‚blue‘, dann ich ‚grün‘ wählen sie warnt auch ‚grün‘. aber wenn ich wieder 'grün' wähle passiert nichts.

+0

nicht bekommen, was Sie versuchen zu erklären .... bitte genauer –

+1

Haben Sie versucht mit Radio 'klicken()'? –

+0

Wenn Sie ein select-Tag verwenden, würde ich die ausgewählte Option wie "Bitte wählen Sie einen Wert" auswählen, dann können Sie überprüfen, wenn Sie den generischen Wert eingeben, um den Benutzer darauf hinzuweisen, dass das Auswahlfeld geändert werden muss. – ddelnano

Antwort

2

Diese Frage wird mir zur Kenntnis gebracht, da es sich hier um ziemlich einfache Dinge handelt, aber niemand dringt weiter darüber nach. OP hat change() verwendet, aber wenn Sie die aktuell ausgewählte Option erneut auswählen, wird nichts ausgelöst!

Ich versuchte click(), aber es feuert, bevor Sie sogar eine Option wählen können.

Mit blur(), nachdem Sie die Auswahl getroffen haben, wird nichts ausgelöst, da das select-Element immer noch fokussiert ist. Sie müssen also wie bei einem Klick nach außen fokussieren, damit es ausgeführt wird.

Also schlug ich OP nur vor, um zu einer radio Eingabe zu wechseln, dann handle Ausführung mit click() Ereignis. Auf diese Weise können Sie das bereits markierte Optionsfeld erneut auswählen.

Aber dann bemerkte ich, dass Sie nur den zweiten Klick auf <select> Element erhalten müssen, weil der erste Klick öffnet die Dropdown-Liste der Optionen der zweite Klick gibt den Wert der ausgewählten Option zurück. So kam ich mit auf den Punkt:

$('select').click(function(){ 
    var $this = $(this); 

    if ($this.hasClass('open')) { 
     alert($this.val()); 
     $this.removeClass('open'); 
    }else { 
     $this.addClass('open'); 
    } 
}); 

Aber jetzt ist das Problem, wenn Sie zuerst auf <select> klicken Sie auf den Dropdown-showned wird, und haben wir auch die Klasse 'open'. Wenn Sie dann auf eine andere Stelle klicken (ohne eine Option auszuwählen), wird das Dropdown-Menü ausgeblendet. Wenn Sie also auf <select> klicken, wird das Ereignis ausgelöst, bevor Sie eine Option auswählen können.

So habe ich diesen Code zu beheben, dass:

$(document).click(function(e){ 
    var $select = $('select'); 

    if (!$select.is(e.target)){ 
     $select.removeClass('open'); //reset the steps by removing open 
    } 
}); 

Sie es in diesem jsfiddle heraus testen. Prost!


Ich denke, wenn <select> verliert seinen Fokus ist auch ein Anliegen. Also fügte ich blur() Ereignis hinzu. Sehen Sie dieses Update jsfiddle

+0

Ich habe dies auf Chrome und Firefox getestet und es funktioniert gut. Kann jemand bitte auch bei anderen Browsern bestätigen. Danke –

+0

Oh das ist toll und sehr gute Erklärung! Vielen Dank nochmal. Ich habe es auf IE 11 & 10 getestet und es funktioniert gut. –

+0

Was ist mit Ereignis auf den '

-1

In Fällen, wo nichts passieren soll, wenn der Benutzer die wählt bereits gewählte Option ich es nehme an, ein „Feature“ des DOM ist eher als ein Fehler auftreten, kein Ereignis zu haben.Wenn dein Code jedoch mehr mit <select> macht, als eine einfache Auswahl zu treffen, ist es auch ein Ärgernis, also bin ich dankbar, dass andere es hier angepackt haben.

Die current accepted answer sind clever in der Verwendung des Click-Ereignisses Auswahl einer bereits ausgewählten <select> Option zu erfassen, aber , wenn Sie bereit sind, die Länge Ihrer Liste als (in diesem Fall) <select size=3> angeben, Sie kann einfach den ausgewählten Wert auf "" von Ihrem "Änderung" -Ereignis setzen, und die gleiche Auswahl wird jedes Mal ausgelöst.

In diesem Fall the OP's example würde sich ändern:

HTML:

<select size=3> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="green">GREEN</option> 
</select> 

jQuery:

$('select').change(function(){ 
    var val = $(this).val(); 
    alert(val); 
    $('select').val(""); 
}); 

Die einzige Nebenwirkung ist, dass das Wählelement kann nun dem Benutzer als angezeigt werden drei Reihen statt einer.

(Kredit geht zu Kirby L. Wallace für die Idee der Auswahl der value auf "").

Verwandte Themen