通过id选择并获取javascript上的属性名称

问题描述：

我想获取元素的第二个值以在另一个div上打印出来。这段代码给了我'未定义'的值。这段代码有什么问题？我不知道。你怎么看？通过id选择并获取javascript上的属性名称

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

'id'应该是唯一的。 – wostex

答

下面是手表更改选择元件的示例 - 代替留意上的一个选项“点击次数”。

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

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

我需要保留另一个值。我可以添加“名称”属性并输出名称属性而不是值吗？ –

是的，你可以做到这一点。但是'名字'真的是一个特定的事情。你有一堆选择。如果您将“数据”存储为元素的属性，则应该使用数据属性 - 或基于值，通过关联重新访问数据。在你的情况下 - 数据attr可能是要走的路。我其实不认为这些选项会得到'名字'。该名称应该在选择如果任何地方。我会修改我的答案给你看。：） – sheriffderek

答

修复id S IN <option> S是不是唯一的，也许尝试使用.getAttribute('name')代替.name：

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

谢谢。这也适用。 –

答

试试这个：

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>

该选项必须与选项从mysql/php获得结果相同。所有的ID必须相同。我能做什么？ –

你应该使用类然后。 –

这应该是一个整体select元素的onchange事件 – sheriffderek

答

这里有几个问题：

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

答

我编辑了您的代码段，以便按照您的要求工作。请注意，我从两个选项中删除了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>

通过id选择并获取javascript上的属性名称

相关推荐