Получить выделенный список атрибут dropdown

У меня есть раскрывающееся меню, показывающее количество и цену предметов. Каждый <option> имеет свой собственный атрибут data-roomid. Когда я выбираю один <option>, он также отображает все выбранные <option> других выпадающих списков из-за querySelectorAll() (я думаю). Я просто хочу получить только один атрибут data-roomid, когда я выбираю <option> из любого раскрывающегося списка. Как я могу это сделать?Получить выделенный список атрибут dropdown

Вот что я сделал, и, как я сказал выше, каждый выбранный <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

Well _you_ выбирает элементы _all_ '.rooms' ... если вы Не хочу этого, тогда не делай этого. Вместо этого обращайтесь к элементу select, который был вызван событием на _only_. (С помощью этого метода старой школы привязки обработчиков событий через атрибуты 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 из-за низкой репутации –

Получить выделенный список атрибут dropdown

ответ

Смежные вопросы