Abrufen von Daten-ID in Select-Tag mithilfe von Jquery

Question

Ich untersuche derzeit, wie Sie die Werte innerhalb HTML-Werte mit Daten-ID erhalten, aber das Ergebnis ist undefiniert.

jquery innen Funktion add_equipment()

var new_id = $('option:selected', this).data('id'); 
console.log(new_id); 

i auch versucht:

var new_id = $(this).find(':selected').data('id'); 
console.log(new_id); 

und

var new_id = $(this).find(':selected').attr('data-id'); 
console.log(new_id); 

mein Tag select

<select class="form-control product-name" id="product-name"> 
    <option value="default" selected disabled>Select Equipment Type</option> 
    <option value="2.00" data-id="1">pencil </option> 
    <option value="5.00" data-id="2">pen </option> 
    <option value="7.00" data-id="3">marker </option> 
</select> 

DANKE IM VORAUS.

Answer 1

Problem mit Ihrer Implementierung ist, dass this bezieht sich auf window Objekt nicht <select> Element, so hat es nicht funktioniert.

Wie Sie zur Verfügung gestellt haben ID Attribut <select> Element, verwenden Sie es

var new_id = $('#product-name').find(':selected').data('id'); 

Answer 2

Sie Daten benötigen() Methode Daten-ID Attribut-ID zu erhalten.

$(function(){ 
 
    $('#product-name').on('change',function(){ 
 
    console.log($('#product-name option:selected').data('id')); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control product-name" id="product-name"> 
 
    <option value="default" selected disabled>Select Equipment Type</option> 
 
    <option value="2.00" data-id="1">pencil </option> 
 
    <option value="5.00" data-id="2">pen </option> 
 
    <option value="7.00" data-id="3">marker </option> 
 
</select>

versuchen diese.