Nur ausgewählte Option Attribut von Dropdown

Ich habe Dropdown-Listen, die Menge und Preis der Elemente anzeigen. Jede <option> hat ihr eigenes Attribut data-roomid. Wenn ich ein <option> wähle, zeigt es auch alle ausgewählten <option> von anderen Dropdowns wegen querySelectorAll() an (denke ich). Ich möchte nur ein data-roomid Attribut erhalten, wenn ich ein <option> aus einem Dropdown auswählen. Wie genau kann ich das machen?Nur ausgewählte Option Attribut von Dropdown

Hier ist was ich getan habe und wie ich oben sagte, es wird jedes ausgewählte <option> von jedem Dropdown, egal welches Dropdown ich klicke.

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>

Quelle

2017-01-26 Diana J

vielleicht, weil Sie '.forEach' verwenden? In jQuery wäre es '$ ('. Rooms'). Eq (0) .find ('option: selected'). Data ('roomid')' – Justinas

Nun _you_ wählen _all_ '.rooms' elements ... wenn Sie nicht Ich will das nicht, dann tu es nicht. Greifen Sie stattdessen auf das select-Element zu, für das das Ereignis bei _only_ ausgelöst wurde. (Mit dieser althergebrachten Methode, Event-Handler über HTML-Attribute anzuhängen, müssen Sie das tun, 'function sumre (selectelement) {...}' und 'onchange =" sumre (this) "') – CBroe

Was "die Option" Objekt sumre Methode zu übergeben über das?

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>

Quelle

2017-01-26 11:58:16 Alessandro

jQuery meine Antwort zu vereinfachen

Sie können this passieren zu funktionieren zu wissen, welches Element Sie geändert:

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>

Quelle

2017-01-26 12:00:15 Justinas

Vielen Dank. Es ist eine gute Antwort für JQuery. Ich benutze eine andere Javascript-Bibliothek anstelle von JQuery. Ich kann wegen der niedrigen Wiederholungsrate nicht +1 geben –

Nur ausgewählte Option Attribut von Dropdown

Antwort

Verwandte Themen