Auswahl Selectbox an Input-Feld senden

bhalili

Mitglied
Hallo Freunde, habe ein Script gefunden wo ich aus einer Selectbox einen Wert auswähle und der Wert dann automatisch in ein Inputfeld eingefügt wird. Das ganze funktioniert mit diesem Script hervorragend.

Edit fiddle - JSFiddle - Code Playground

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

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

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

Mein Problem ist jetzt, wenn ich eine weitere Selectbox hinzufüge funktioniert das ganze nicht richtig.
Habe eine weitere Funktion erstellt mit einer anderen ID und ein weiteres Inputfeld mit der neuen ID, nur funktioniert das halt nicht.

HTML:
<select name="one" 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>

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

<select name="two" 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>

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

Javascript:
function myFunction(e) {
    document.getElementById("myText1").value = e.target.value
}
function myFunction(f) {
    document.getElementById("myText2").value = f.target.value
}

Bitte um Hilfe
 

Andreas-B

Mitglied
Lass mich raten:
Die 2. Box wird immer gefüllt egal welches Select du verwendest?

Dein Problem ist, da die zweite Funktion genauso heißt wie die Erste, überschreibt die Zweite die erste.
Nenne einfach deine zweite Funktion um. (Und vergiss nicht den Aufruf in deinem HTML anzupassen.)
 

Sempervivum

Erfahrenes Mitglied
Du kannst problemlos auch nur eine Funktion verwenden, wenn Du dieser beim Aufruf die ID des Input übergibst:
<select name="one" onchange="myFunction(event, 'myText1')">
und dann in der Funktion auswertest:
Code:
function myFunction(f, idInput) {
    document.getElementById(idInput).value = f.target.value
}
 

basti1012

Erfahrenes Mitglied
Wenn deine HTML Reinfolge so bleibt, könnte es auch so gehen
HTML:
<select name="one" onchange="this.nextElementSibling.value = this.value">
    <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>
<input id="myText1" type="text" value="colors">
<select name="two" onchange="this.nextElementSibling.value = this.value">
    <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>
<input id="myText2" type="text" value="colors">