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

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 2

您应该在HTML中将'attribut'重命名为'value'。但是，您可以定义自己的属性并将其读取（如果验证无关紧要，对于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 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>

JavaScript从select中获取归因

4 个答案: