web-dev-qa-db-fra.com

html - comment obtenir l'attribut personnalisé de la balise d'option dans la liste déroulante?

Si j'ai ce code:

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

Comment puis-je obtenir la valeur "-1" de l'attribut personnalisé isred? Je ne veux pas utiliser la propriété value. Et je ne veux pas cibler la balise d'option par un nom ou un identifiant.

Je veux quelque chose comme onchange="alert(this.getselectedoptionID.getAttribute('isred'));"

Quelqu'un peut-il aider?

Je ne veux pas non plus utiliser jquery.

javascripthtmlselect
31
omega

Vous devez comprendre ce qu'est le selectedIndex, puis getAttribute à partir de ce tableau d'options [].

<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

En remarque:

N'utilisez pas le javascript en ligne dans votre HTML. Vous souhaitez séparer votre logique métier de votre interface utilisateur. Créez un gestionnaire d'événements javascript à la place pour gérer cela. (jQuery/Angular/etc)

54
Mark Pieszak - Trilon.io

en jquery, vous pouvez simplement écrire:

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

Utilisez quelque chose comme ceci:

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

En supposant que nous avons un balisage HTML comme ci-dessous:

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

Le attr "ren" est accessible comme ceci:

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
}

Démo

3
walter

Vous utilisez: .getAttribute('isred')

Tu veux:

<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>
1
GitaarLAB
//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = 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>
0
Code Cooker