Select 通过 id 获取 javascript 上的属性名称

Question

我正在尝试获取一个元素的第二个值以在另一个 div 上打印出来。此代码给了我 'undefined' 值。这段代码有什么问题？我不知道。你怎么看？

<select class="form-control"  id="Workers"  value="Select an id">
 <option id="myInput" onclick="myFunction()" name="personname" value="personid">personid</option>
 <option id="myInput" onclick="myFunction()" name="personname2" value="personid2">personid2</option>
</select>

 <p id="demo"></p>

<script>

 function myFunction() {
    document.getElementById("demo").innerHTML = document.getElementById("myInput").name ;
}

</script>

Answer 1

修复 <option>s 中的 ids 不是唯一的，也许尝试使用 .getAttribute('name') 而不是 .name:

function myFunction() {
    document.getElementById("demo").innerHTML = document.getElementById("myInput").getAttribute('name') ;
}

Answer 2

试试这个：

document.getElementById("demo").innerHTML = document.getElementById("myInput2").getAttribute("name");

<select class="form-control"  id="Workers"  value="Select an id">
 <option id="myInput1" onclick="myFunction()" name="personname" value="personid">personid</option>
 <option id="myInput2" onclick="myFunction()" name="personname2" value="personid2">personid2</option>
</select>

 <p id="demo"></p>

Answer 3

这里有几个问题：

id 应该是唯一的
您需要使用 .getAttribute('name') 而不是 .name

这是您的代码版本，它使用 "personname"

填充 <p id="demo"></p>

<select class="form-control"  id="Workers"  value="Select an id">
  <option id="myInput" onclick="myFunction()" name="personname" value="personid">personid</option>
  <option id="myInput" onclick="myFunction()" name="personname2" value="personid2">personid2</option>
</select>

<p id="demo"></p>

<script>

window.onload = function() {
  document.getElementById("demo").innerHTML = document.getElementById("myInput").getAttribute('name') ;
}

</script>

Answer 4

我已经编辑了您的代码段以使其按您希望的方式工作。请注意，我从两个选项中删除了 ID，我的代码片段不需要它，而您对两个元素使用了相同的 ID。

<select class="form-control" id="Workers" onchange="myFunction(this)">
 <option value="0">0</option>";  
 <option name="personname" value="personid">personid</option>
 <option name="personname2" value="personid2">personid2</option>
</select>

<p id="demo"></p>

<script>
  function myFunction(elem) {
  var optionName = '';
    if (elem.selectedIndex > 0) {
        optionName = elem.options[elem.selectedIndex].getAttribute('name');
    }
    document.getElementById('demo').innerHTML = optionName;
  }
</script>

Answer 5

这是一个监视 select 元素变化的示例 - 而不是监视选项上的 'clicks'。

// cache these elements you're going to use first
var workerSelect = document.getElementById('worker-select');
var demoArea = document.getElementById('demo-area');

workerSelect.addEventListener('change', function() {
  // 'this' refers to the thing that the method is called on... so - the select
  // console.log(this); // to see select object
  var selectedOption = this.options[this.selectedIndex];
  var handle = selectedOption.getAttribute('data-handle');
  var label = selectedOption.label;
  demoArea.innerHTML = "handle: " + handle + " | name: " + label;
});

<select id="worker-select" name="readAboutIt">
  <option disabled selected="selected">Select a worker</option>
  <option label="Derek Wood" value="1" data-handle="sheriffderek"></option>
  <option label="John Doe" value="2" data-handle="J. Doe"></option>
</select>

<p id="demo-area"> <!-- output here... --></p>

data-attr 可以是任何你想要的。 data-color="red"data-my-favorite-food="?"

Select: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

选项：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

Select 通过 id 获取 javascript 上的属性名称

Select by id and get the name of the attribute on javascript

javascript

getelementbyid

getelementsbytagname