Html - как получить настраиваемый атрибут тега параметра в раскрывающемся списке?

Если у меня есть этот код:

 <select onchange="alert('?');" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
 </select>

Как я могу получить значение '-1' из пользовательского атрибута isred? Я не хочу использовать свойство value. И я не хочу таргетировать тег опции по имени или id.

Мне нужно что-то вроде onchange="alert(this.getselectedoptionID.getAttribute('isred'));"

Может ли кто-нибудь помочь?

Также я не хочу использовать jquery.

Ответы

Ответ 1

Вам нужно выяснить, что такое selectedIndex, затем getAttribute из этого параметра [] Массив.

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
    <option isred="-5" value="hi">click</option>
</select>

jsFiddle DEMO

В качестве примечания:

Не используйте встроенный javascript в HTML. Вы хотите отделить свою бизнес-логику от своего пользовательского интерфейса. Создайте обработчики событий javascript вместо этого. (jQuery/Angular/etc)

Ответ 2

в jquery, вы можете просто написать:

$("#myname").find(':selected').attr('isred');

Ответ 3

Используйте что-то вроде этого:

document.getElementById("x").onchange = function () {
    console.log(this.options[this.selectedIndex].getAttribute("isred"));
};

Ответ 4

Предполагая, что мы имеем разметку HTML, как показано ниже:

<form id="frm_">
    <select name="Veh">
        <option value='-1' selected='selected'>Select</option>
        <option value='0' ren='x'>xxx</option>
        <option value='1' ren='y'>yyy</option>
    </select>
</form>

Доступ к attr "ren" можно выполнить следующим образом:

function getRep() {
    var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
                 .elements['Veh'].selectedIndex].getAttribute('ren');
    console.log("Val of ren " + ren); //x or y
}

Демо

Ответ 5

Вы используете: .getAttribute('isred')

Вы хотите:

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
    <option isred="-1" value="hi">click</option>
    <option isred="-1" value="ho">click</option>
</select>

Ответ 6

//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

document.getElementById("name_your_id").onclick = function(event) {

//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :) 
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}

 <select id="name_your_id" name="myname" class="myclass">
    <option isred="423423" value="hi">One</option>
    <option isred="-1" value="hi">Two</option>
 </select>

Ответ 7

вы можете

$(".myclass").val(function(){alert($("option",this).attr("isred"));})