jquery Klick wählen Sie die Option Wert mit der Option Text

Question

i Auswahlbox Optionswert und Option Text in Click-Ereignis mit Jquery meinen Code unten

ist erhalten möchten

Html-Code:

<select id="tskill" name="tskill" > 
    <option value="1">One </option> 
    <option value="2">Two </option> 
    <option value="3">three </option> 
    <option value="4">four </option> 
</select> 

JQuery:

$('#tskill').click(function(){ 
    var id = $(this).val(); 
}); 

Wenn ich auf "vier" im Dropdownfeld klicke, wird id = 4 zurückgegeben, aber ich möchte ID mit Text "vier" bekommen. Ich habe diese Syntax verwendet

$(this).text(); 
$(this).html(); 

Aber es wird ganze Auswahl Box Text zurückgeben. Wie kann ich Klick-Text-Wert bekommen?

Answer 1

Verwenden Sie change Ereignis statt click wie folgt.

$('#tskill').change(function() { 
 
    var id = $(this).val(); 
 
    var text = $('option:selected', this).text(); //to get selected text 
 
    alert(text) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="tskill" name="tskill" > 
 
    <option value="1">One </option> 
 
    <option value="2">Two </option> 
 
    <option value="3">three </option> 
 
    <option value="4">four </option> 
 
</select>

Answer 2

Ich bin nicht sicher, warum Sie click Ereignis werden mit dem ausgewählten Optionswert und Text zu erhalten. Wenn Sie das wirklich wollen, dann versuchen Sie es mit dem folgenden Code.

$('#tskill').click(function(){ 
 
    var id = $(this).val(); 
 
    var text = $(this).find('option:selected').text(); 
 
    
 
    alert(id + ', ' + text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="tskill" name="tskill" > 
 
    <option value="1">One </option> 
 
    <option value="2">Two </option> 
 
    <option value="3">three </option> 
 
    <option value="4">four </option> 
 
</select>

---

---

Mittelwert während

Ich würde mit den change Event-Handler empfehle den Job zu erledigen. Gefällt Ihnen dieses

$('#tskill').change(function(){ 
 
    var id = $(this).val(); 
 
    var text = $(this).find('option:selected').text(); 
 
    
 
    alert(id + ', ' + text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="tskill" name="tskill" > 
 
    <option value="1">One </option> 
 
    <option value="2">Two </option> 
 
    <option value="3">three </option> 
 
    <option value="4">four </option> 
 
</select>