Javascript-forum

Normale Version: Den Selectfeld (Dropdown) Inhalt in Textarea einfügen
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Wenn man im Selectfeld was aussucht wird der Inhalt des Selects an der Stelle im Textarea kopiert wo man gerade am Schreiben ist 
DEMO 


Das ist eigentlich nee ganz Simple Lösung die jeder Anfänger so machen würde.
Es gibt zwar noch andere Möglichkeiten das Ergebnis so hinzubekommen ,aber das tut es auch und erfüllt sein Zweck.

PHP-Code:
<!DOCTYPE html>
<
html>
<
head>
 
  <title>From Select to Textarea</title>
 <
style>
body{
 
    text-align:center;
}

textarea{
 
   width:60%;
 
   height:200px;
 
   ont-size:30px;
}

h1{
 
  text-decoration:underline;
}
select{
 
   height:60px;
 
   width:30%;
 
   font-size:40px;
}
 </
style>
</
head>
<
body>
 <
h1>Aus Dropdown in Textarea Einfügen</h1>
 <
textarea id="text"></textarea><br>
 <
select id="selec">
 
      <option value=""> --- Auswahl --- </option>
 
      <option value="peter">Peter</option>
 
      <option value="heiz">Heinz</option>
 
      <option value="Jürgen">Jürgen</option>
 
      <option value="Stefan">Stefan</option>
 
      <option value="Basti">Basti</option>
 </
select>
 <
script>
document.getElementById('selec').onchange=function(){
 
    var text=document.getElementById('text').value;
 
    var select=document.getElementById('selec').value;
 
    document.getElementById('text').value=text+''+select+'';

</
script>
</
body

Mit Jquery geht das genau so einfach ,sogar einfacher
PHP-Code:
$('#selec').change(function(){
 
 $('#text').html($('#text').val()+$('#selec').val());
}) 
Moin,
hier kann man auch schön das input-event nutzen. Der Vorteil ist, dass man Namen mehrmal hinter einander schreiben kann.

Hier meine JavaScript-Variante:
Code:
'use strict'; var liste, textfeld;
document.addEventListener('DOMContentLoaded', () => {
    liste = document.getElementById('liste'); textfeld = document.getElementById('textfeld');
    liste.addEventListener('input', ()=>{textfeld.value = textfeld.value + liste.value;});
});

VG rzscout