Question

我正在尝试获取元素的第二个值，以便在另一个div上打印出来。这段代码给了我'undefined＆＃39;值。这段代码有什么问题？我不知道。你觉得怎么样？

<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

试试这个：

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 2

我已经根据您的需要编辑了您的代码段。请注意，我从两个选项中删除了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 3

修复id中的<option>不是唯一的，可以尝试使用.getAttribute('name')代替.name：

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

Answer 4

这里有几个问题：

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 5

以下是一个观看select元素进行更改的示例 - 而不是观看“点击次数”。选项。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

按ID选择并在javascript上获取属性的名称

5 个答案: