Question

我有下拉菜单，显示商品的数量和价格。每个<option>都有自己的data-roomid属性。当我选择一个<option>时，它还会显示由<option>引起的所有其他querySelectorAll()下拉列表（我认为）。当我从任何下拉列表中选择data-roomid时，我只想获得一个<option>属性。我该怎么办呢？

以下是我所做的事情，正如我上面所说，无论我点击哪个下拉列表，它都会获得每个下拉列表的每个选定<option>。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

什么是将“select”对象传递给sumre方法？

function sumre(select) {
		var roomid = select.options[select.selectedIndex].getAttribute("data-roomid");
		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>

Answer 2

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>

仅获取下拉列表的选定选项属性

2 个答案: