獲取僅下拉菜單的選項屬性

我有顯示項目數量和價格的下拉菜單。每個<option>都有自己的data-roomid屬性。當我選擇一個<option>時，它也顯示了由於querySelectorAll()（我認爲）而產生的所有其他下拉菜單的<option>。當我從任何下拉列表中選擇<option>時，我只想獲得一個data-roomid屬性。我該如何做到這一點？獲取僅下拉菜單的選項屬性

這是我所做的，正如我上面所說的，無論我點擊哪個下拉列表，它都會獲得每個下拉列表中的每個選擇<option>。

function sumre() { 
 
\t var selects = document.querySelectorAll(".rooms"); 
 
\t selects.forEach(function(select){ 
 
\t \t var roomid = select.options[select.selectedIndex].getAttribute("data-roomid"); 
 
\t \t alert(roomid); 
 
\t }); 
 
}

<select id="room_length_dropdown_21" class="rooms" onchange="sumre()"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="48" value="1" data-price="88">1 ($ 88)</option> 
 
    <option data-roomid="49" value="2" data-price="176">2 ($ 176)</option> 
 
    <option data-roomid="50" value="3" data-price="264">3 ($ 264)</option> 
 
    <option data-roomid="51" value="4" data-price="352">4 ($ 352)</option> 
 
    <option data-roomid="52" value="5" data-price="440">5 ($ 440)</option> 
 
</select> 
 

 
<select id="room_length_dropdown_23" class="rooms" onchange="sumre()"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="58" value="1" data-price="77">1 ($ 77)</option> 
 
    <option data-roomid="59" value="2" data-price="154">2 ($ 154)</option> 
 
    <option data-roomid="60" value="3" data-price="231">3 ($ 231)</option> 
 
    <option data-roomid="61" value="4" data-price="308">4 ($ 308)</option> 
 
</select>

來源

2017-01-26 Diana J

也許是因爲你使用'.forEach'？在jQuery中它會是'$（'。rooms'）。eq（0）.find（'option：selected'）。data（'roomid'）' – Justinas

嗯_you_選擇_all_'.rooms'元素...如果你不不要那樣做，那就別做了。相反，請訪問_only_上觸發事件的select元素。（使用這種通過HTML屬性附加事件處理程序的老式方法，您需要像這樣做，'function sumre（selectelement）{...}'和'onchange =「sumre（this）」'） – CBroe

什麼是要通過「選擇」對象sumre方法？

function sumre(select) { 
 
\t \t var roomid = select.options[select.selectedIndex].getAttribute("data-roomid"); 
 
\t \t alert(roomid); 
 
}

<select id="room_length_dropdown_21" class="rooms" onchange="sumre(this)"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="48" value="1" data-price="88">1 ($ 88)</option> 
 
    <option data-roomid="49" value="2" data-price="176">2 ($ 176)</option> 
 
    <option data-roomid="50" value="3" data-price="264">3 ($ 264)</option> 
 
    <option data-roomid="51" value="4" data-price="352">4 ($ 352)</option> 
 
    <option data-roomid="52" value="5" data-price="440">5 ($ 440)</option> 
 
</select> 
 

 
<select id="room_length_dropdown_23" class="rooms" onchange="sumre(this)"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="58" value="1" data-price="77">1 ($ 77)</option> 
 
    <option data-roomid="59" value="2" data-price="154">2 ($ 154)</option> 
 
    <option data-roomid="60" value="3" data-price="231">3 ($ 231)</option> 
 
    <option data-roomid="61" value="4" data-price="308">4 ($ 308)</option> 
 
</select>

來源

2017-01-26 11:58:16 Alessandro

jQuery來簡化我的回答

你可以通過this起作用知道你改變什麼元素：

function sumre(el) { 
 
    var roomId = $('option:selected', el).data('roomid'); 
 

 
    alert(roomId); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="room_length_dropdown_21" class="rooms" onchange="sumre(this)"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="48" value="1" data-price="88">1 ($ 88)</option> 
 
    <option data-roomid="49" value="2" data-price="176">2 ($ 176)</option> 
 
    <option data-roomid="50" value="3" data-price="264">3 ($ 264)</option> 
 
    <option data-roomid="51" value="4" data-price="352">4 ($ 352)</option> 
 
    <option data-roomid="52" value="5" data-price="440">5 ($ 440)</option> 
 
</select> 
 

 
<select id="room_length_dropdown_23" class="rooms" onchange="sumre(this)"> 
 
    <option value="0">0</option> 
 
    <option data-roomid="58" value="1" data-price="77">1 ($ 77)</option> 
 
    <option data-roomid="59" value="2" data-price="154">2 ($ 154)</option> 
 
    <option data-roomid="60" value="3" data-price="231">3 ($ 231)</option> 
 
    <option data-roomid="61" value="4" data-price="308">4 ($ 308)</option> 
 
</select>

來源

2017-01-26 12:00:15 Justinas

謝謝。對於JQuery來說這是一個很好的答案。我正在使用另一個Javascript庫而不是JQuery。由於代表低，我無法給+1 –

獲取僅下拉菜單的選項屬性

回答

相關問題