Afisare optiune selectata intr-un Div

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Marius
Mesaje: 60

Afisare optiune selectata intr-un Div

Cum pot face ca atunci cand e selectata o optiune dintr-o lista <select> sa fie afisata intr-un Div valoarea acelei optiuni.
Am acest cod html, cu lista de optiuni si tag-ul Div:

Cod: Selectaţi tot

<select id='drink'>
  <option value=''>Which drink would you like?</option>
  <option>Latte</option>
  <option>Capuccino</option>
  <option>Americano</option>
  <option>Tea</option>
</select>
<div id='output'></div>

MarPlo
Cu JavaScript adaugi un eveniment 'change' la elementul <select> care se va declansa cand o optiune e selectata.
In interiorul acelui eveniment folosesti 'this.value' ca sa preiei valoarea selectata, apoi cu 'innerText' o adaugi in Div.

Cod: Selectaţi tot

Select an option: 
<select id='drink'>
  <option value=''>Which drink would you like?</option>
  <option>Latte</option>
  <option>Capuccino</option>
  <option>Americano</option>
  <option>Tea</option>
</select>
<div id='output'></div>

<script>
var drinkSelect = document.getElementById('drink');
var outputDiv = document.getElementById('output');
drinkSelect.addEventListener('change',function(){
  output.innerText = 'You like '+ this.value;
})
</script>
- Demo:
Select an option:

Subiecte similare