Рассмотреть:

<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 в порядке.

0
Yongwei Xing 31 Май 2010 в 09:49

4 ответа

Лучший ответ

Вы должны переименовать «attribut» в «value» в вашем 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 к переменной результатов.)

1
Peter Mortensen 4 Июл 2010 в 11:24

В теге option не определен атрибут attribut. Это не стандартный 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
4
Darin Dimitrov 31 Май 2010 в 05:55

Я согласен с @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>
0
Peter Mortensen 4 Июл 2010 в 11:25
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

0
nico 31 Май 2010 в 05:57