JavaScript obtenir l'attribution de select

Question

Tenir compte:

<select id="test"> 
    <option attribut="1">test 1</option> 
    <option attribut="2">test 2</option> 
    <option attribut="3">test 3</option> 
    <option attribut="4">test 4</option> 
    <option attribut="5">test 5</option> 
</select> 

Je veux obtenir l'attribut de l'élément sélectionné. Y a-t-il un moyen simple de le faire? Le JavaScript natif est bien.

Answer 1

Vous devez renommer 'attribut' en 'valeur' ​​dans votre code HTML. Vous pouvez cependant définir vos propres attributs et les lire aussi (si la validation n'est pas un problème, et pour HTML5 vous pouvez préfixer votre attribut personnalisé avec 'data-'). On dirait:

<select id="test"> 
    <option value="1" data-attrib="five">test 1</option> 
    <option value="2" data-attrib="four">test 2</option> 
    <option value="3" data-attrib="three">test 3</option> 
    <option value="4" data-attrib="two">test 4</option> 
    <option value="5" data-attrib="one">test 5</option> 
</select> 
​ 

maintenant pour cette sélection, vous pouvez obtenir les valeurs des options et des valeurs « attrib » avec quelque chose comme:

function getOpts(){ 
    var mySelect = document.getElementById('test') 
     , opts = mySelect.options 
     , results = '' 
     , i=0 
     , len = opts.length; 
    while (i<len){ 
     results += opts[i].getAttribute('data-attrib')+'-'+ 
        (opts[i].selected 
         ? 'selected value: '+opts[i].value 
         : opts[i].value)+'\n'; 
     i++; 
    } 
    return '\n'+results; 
} 

(Si vous cherchez également la valeur de texte de l'option, vous peut ajouter opts[i].firstChild.nodeValue à la variable de résultats.)

Answer 2

Il n'y a pas d'attribut attribut défini sur la balise option. Ce n'est pas du HTML standard. Une façon plus standard est d'utiliser l'attribut value:

<select id="test"> 
    <option value="1">test 1</option> 
    <option value="2">test 2</option> 
    <option value="3">test 3</option> 
    <option value="4">test 4</option> 
    <option value="5">test 5</option> 
</select> 

qui vous permet de le faire:

var value = document.getElementById('test').value; 
alert(value); // shows the selected value 

Answer 3

d = document.getElementById("test"); 
// This will get the first attribute of the first option 
// Change the indices accordingly to get the others 
myattr = d[0].attributes[0].value; 

Bien sûr, ce n'est pas standard HTML

Answer 4

Je suis d'accord avec @darin. Le code suivant vous donne la valeur de l'option lors de la modification d'un événement.

<script type="text/javascript"><!-- 
    function getValue(){ 
    val = document.getElementById("test").value; 
    alert(""+val)  
    } 
    </script> 

<select id="test" name="selectName" size="1" onChange="getValue();"> 
    <option value="1">test 1</option> 
    <option value="2">test 2</option> 
    <option value="3">test 3</option> 
    <option value="4">test 4</option> 
    <option value="5">test 5</option> 
</select>