HTML Droptdownauswahl ergänzt text input Feld (bsp js)

[freekiller]

Hallo zusammen,

ich bin auf der Suche nach einer Lösung für ein HTML Formular.
Zwar ist es so, ich brauche eine Dropdownliste in welcher ein Name gewählt werden kann und anschliessend eine dazugehörende Telefonnummer in ein anderes Text input Feld ausgegeben wird.

Bsp:
[src=html5]
<tr>
<td>Name</td>
<td>
<selection name="name" class="form-control"/>
<option value="Max Muster">Max Muster</option>
<option value="Max Muster2">Max Muster2</option>
</selection>
</td>
</tr>
<tr><td>Mobilenummer</td>
<td>
<input type="text" name="no" class="form-control" value="HIER SOLLTE BEI DER WAHL VON MAX MUSTER SEINE TELNR
ERSCHEINEN">
</td>
</tr>
[/src]

Besten Dank für Lösungsansätze

Beste Grüsse

 

[Jester]

[src=html5]
<tr>
<td>Name</td>
<td>
<select name="name" class="form-control" onchange="document.getElementById('tgtField').value=this.options[this.selectedIndex].value" />
<option value="Max Muster">Max Muster</option>
<option value="Max Muster2">Max Muster2</option>
</select>
</td>
</tr>
<tr><td>Mobilenummer</td>
<td>
<input type="text" name="no" id="tgtField" class="form-control" value="">
</td>
</tr>
[/src]

 

[freekiller]

[src=html5]
<tr>
<td>Name</td>
<td>
<select name="name" class="form-control" onchange="document.getElementById('tgtField').value=this.options[this.selectedIndex].value" />
<option value="Max Muster">Max Muster</option>
<option value="Max Muster2">Max Muster2</option>
</select>
</td>
</tr>
<tr><td>Mobilenummer</td>
<td>
<input type="text" name="no" id="tgtField" class="form-control" value="">
</td>
</tr>
[/src]

Besten Dank für das Feedback. Der Code funktioniert zwar allerdings hat es noch nicht den benötigten Effekt.
Und zwar muss bei <option value="Max Muster">Max Muster</option> jeweils der value und der Anzeigetext mit dem Namen versehen sein, da der Value weiterverwendet wird. Somit kann ich leider nicht die Telefonnummer dort hinterlegen, da ansonsten statt der Name ebenfalls die Telefonnummer bei der Weiterverarbeitung erscheint. Gibt es noch eine andere Variante, dass oben im value="Name der Person" unten im value="dazugehörigeTel." erscheint?

Herzlichen Dank

 

[KingJamez]

Du kannst das data-attribute verwenden, dort eine Telefonnummer hinzerlegen. Und beim onchange das data-attribute auslesen und anzeigen. Jester hat hier nur einen Ansatz geliefert, der von dir jederzeit modifiziert werden kann

 

[freekiller]

Besten Dank für den Hinweis

Habe es geschafft mit dem data-attribute Tipp

[src=html5]
<script type="text/javascript">
function OnSelectChange(event) {
document.getElementById('ibaw').value = event.selectedOptions[0].getAttribute('data-number');
}
</script>

<tr><td>Name</td>
<td>
<select onchange="OnSelectChange(this)" class="form-control" name="name">
<option data-number="+41795443322" value="Test Name">Test Name</option>
<option data-number="+41795443322" value="Max Muster">Max Muster</option>
</select>
</td>
</tr>

<tr><td>Mobilenummer</td>
<td>
<input id="ibaw" type="text" name="no" class="form-control">
</td>
</tr>

[/src]

Besten Dank euch beiden