JavaScript получить атрибуции из отборных

Question

Рассмотрим:

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

Я хочу, чтобы получить атрибут выбранного элемента. Есть ли простой способ сделать это? На родном JavaScript отлично.

Answer 1

Вы должны переименовать атрибут 'значение' в свой HTML. Однако вы можете определить свои собственные атрибуты и прочитать их тоже (если проверка не вызывает беспокойства, а для HTML5 вы можете префикс своего пользовательского атрибута «data-»). Похоже:

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

Теперь для этого выбора вы можете получить значение параметров и значение «ATTRIB» что-то вроде:

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

(Если вы также ищете текстовое значение параметра, вы может добавить opts[i].firstChild.nodeValue к переменной результатов.)

Answer 2

Атрибут attribut, определенный на теге option. Это не стандартный HTML. Более стандартный способ заключается в использовании 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> 

, который позволяет это сделать:

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; 

Конечно, это не стандартный HTML

Answer 4

Я согласен с @darin. Следующий код дает вам значение параметра при изменении события.

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