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

來源

2017-05-26 J. Doe

'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

來源

2017-05-27 00:43:07 sheriffderek

我需要保留另一個值。我可以添加「名稱」屬性並輸出名稱屬性而不是值嗎？ –

是的，你可以做到這一點。但是'名字'真的是一個特定的事情。你有一堆選擇。如果您將「數據」存儲爲元素的屬性，則應該使用數據屬性 - 或基於值，通過關聯重新訪問數據。在你的情況下 - 數據attr可能是要走的路。我其實不認爲這些選項會得到'名字'。該名稱應該在選擇如果任何地方。我會修改我的答案給你看。：） – sheriffderek

修復id S IN <option> S是不是唯一的，也許嘗試使用.getAttribute('name')代替.name：

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

來源

2017-05-26 21:30:54 OverCoder

謝謝。這也適用。 –

試試這個：

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>

來源

2017-05-26 21:32:22

該選項必須與選項從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>

來源

2017-05-26 21:34:08 jjudd

我編輯了您的代碼段，以便按照您的要求工作。請注意，我從兩個選項中刪除了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>

來源

2017-05-26 21:37:32

通過id選擇並獲取javascript上的屬性名稱

回答

相關問題