Sélectionnez par ID et obtenez le nom de l'attribut sur javascript

Question

J'essaie d'obtenir une deuxième valeur d'un élément pour l'imprimer sur un autre div. Ce code me donne une valeur 'indéfinie'. Quel est le problème avec ce code? Je ne sais pas. Qu'est-ce que tu penses?

<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

Voici un exemple qui surveille l'élément de sélection pour les changements - au lieu de regarder pour « clics » sur une option.

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

données attr peut être tout ce que vous voulez. data-color="red"data-my-favorite-food="?"

Sélectionner: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

Answer 2

Fix id s dans <option> s étant pas unique et peut-être essayer d'utiliser .getAttribute('name') au lieu de .name:

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

Answer 3

Essayez ceci:

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 4

Il y a des questions couple ici:

• id doit être unique
• vous devez utiliser .getAttribute('name') plutôt que .name

Voici une version de votre code qui renseigne le <p id="demo"></p> avec "personname"

<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

J'ai modifié votre extrait pour qu'il fonctionne comme vous le souhaitez. Notez que j'ai supprimé l'ID des deux options, il wasent nécessaire pour mon extrait et vous avez utilisé le même ID pour les deux éléments.

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