Javascript change la valeur d'entrée lorsque l'option sélectionnée est sélectionnée

Question

Je suis très nouveau pour javascript. J'ai donc une option de sélection et un champ de saisie. Ce que je veux réaliser est d'avoir la valeur du champ d'entrée change quand je choisis une option particulière. C'est ce que j'ai essayé:

First Name: <input type="text" value="colors"> 

<select name=""> 
    <option>Choose Database Type</option> 
    <option onclick="myFunction(g)>green</option> 
    <option onclick="myFunction(r)>red</option> 
    <option onclick="myFunction(o)>orange</option> 
    <option onclick="myFunction(b)>black</option> 
</select> 

<script> 
function myFunction(g) { 
    document.getElementById("myText").value = "green"; 
} 
function myFunction(r) { 
    document.getElementById("myText").value = "red"; 
} 
function myFunction(o) { 
    document.getElementById("myText").value = "orange"; 
} 
function myFunction(b) { 
    document.getElementById("myText").value = "black"; 
} 
</script> 

Answer 1

Quelques choses:

Vous devez utiliser la fonction onchange, plutôt que onclick sur chaque option.

Utilisez un attribut value sur chaque option pour stocker les données, et utiliser une instance de this pour affecter le changement (ou event.target)

Vous n'avez pas ID sur votre champ de texte

Vous êtes absent la fin de citation pour votre fonction onclick

<select name="" onchange="myFunction(event)"> 
    <option disabled selected>Choose Database Type</option> 
    <option value="Green">green</option> 
    <option value="Red">red</option> 
    <option value="Orange">orange</option> 
    <option value="Black">black</option> 
</select> 

Et la fonction:

function myFunction(e) { 
    document.getElementById("myText").value = e.target.value 
} 

Et ajoutez l'ID

<input id="myText" type="text" value="colors"> 

Fiddle: https://jsfiddle.net/gasjv4hs/

Answer 2

Vous créez des fonctions avec le même nom à plusieurs reprises.

Seul le dernier va fonctionner.

Les variables que vous transmettez g,r,o,b ne sont pas définies.

N'ajoutez pas onclick à option ajoutez onchange à select.

Faire usage de HTML5data-* attribut

function myFunction(element) { 
 
    document.getElementById("myText").value = element; 
 
}

First Name: <input type="text" id="myText" value="colors"> 
 

 
<select name="" onchange="myFunction(this.value);"> 
 
    <option>Choose Database Type</option> 
 
    <option data-value="green">green</option> 
 
    <option data-value="red">red</option> 
 
    <option data-value="orange">orange</option> 
 
    <option data-value="black">black</option> 
 
</select>

Answer 3

Vous pouvez résoudre cette façon.

`Prénom:

<select name="" onchange="myFunction()" id="selectID"> 
    <option>Choose Database Type</option> 
    <option >green</option> 
    <option >red</option> 
    <option >orange</option> 
    <option >black</option> 
</select> 

<script> 
function myFunction() { 
    var selectItem = document.getElementByID('selectID').value; 
    document.getElementByID('yourId').value = sekectItem; 

} 
</script> 

Answer 4

est ici un moyen d'y parvenir:

var select = document.getElementById('colorName'); 
 

 
function myFunction(event) { 
 
    var color = 'No color selected'; 
 

 
    if (select.selectedIndex > 0) { 
 
    color = select.item(select.selectedIndex).textContent; 
 
    } 
 
    
 
    document.getElementById('myText').value = color; 
 
} 
 

 
select.addEventListener('click', myFunction); 
 

 
myFunction();

First Name: <input type="text" id="myText"> 
 

 
<select id="colorName"> 
 
    <option>Choose Database Type</option> 
 
    <option>green</option> 
 
    <option>red</option> 
 
    <option>orange</option> 
 
    <option>black</option> 
 
</select>

Answer 5

Votre code devrait être comme suit.

<input type="text" name="color" id="color"> 
<select name="" id="change_color"> 
    <option>Choose Database Type</option> 
    <option >green</option> 
    <option >red</option> 
    <option >orange</option> 
    <option >black</option> 
</select> 
<script type="text/javascript" src="jquery.js"></script> 
<script> 
    $(document).ready(function() {  
    $('#change_color').change(function(){ 
    var color = ($(this).val()); 
    $('#color').val(color); 
    }) 
    }); 
</script>