使用jQuery獲取選擇標記中的數據ID

-1

我目前正在研究如何使用data-id獲取html值內的值，但結果是未定義的。使用jQuery獲取選擇標記中的數據ID

內部功能add_equipment（）

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

我也試過jQuery的：

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

和

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

我選擇標籤

<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>

謝謝您的提前。

來源

2017-08-04 Marc Christian Busante

從哪裏調用'add_equipment'函數？以上所有工作都會提供;你正在使用'this'在正確的上下文 – Satpal

我有這個按鈕（）在選擇標記的下方。 –

'<選項值=「默認」選擇禁用>選擇設備類型'沒有數據ID。因此，它總是會給第一次加載時未定義或將被選擇' –

問題與你執行的是，this指window對象不是<select>元素，因此它沒有奏效。

正如你所提供ID屬性<select>元素，用它

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

來源

2017-08-04 12:12:33 Satpal

你需要使用數據（）方法得到數據-ID屬性ID。

$(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>

試試這個。

來源

2017-08-04 12:13:48

使用jQuery獲取選擇標記中的數據ID

回答

相關問題