如何獲取選項的屬性

Question

我已經使用JS創建了動態下拉列表

var str = `<select onchange="getPrice(this)"><option value="">Select</option>`;
for(var s=0;s<arr.length;s++) {
    str += `<option value="${arr[i].name}" price="${arr[i].price}">${arr[i].name}</option>`;
}
str += '</select>

function getPrice(ele) { 
    console.log(ele.value); //getting the value here
    console.log(ele.price); //getting null here 
}

ele.price給了我null

Answer 1

您可以先獲取selected選項的引用，然后使用getAttribute()

ele.options[ele.selectedIndex].getAttribute('price')

但是，我建議您使用data-*前綴屬性

<option value="${arr[i].name}" data-price="${arr[i].price}">${arr[i].name}</option>

然后可以使用Element.dataset屬性。

var price = ele.options[ele.selectedIndex].dataset.price