При выборе select изменить текст div

Рейтинг: 2Ответов: 1Опубликовано: 21.11.2014

Делаю так:

<script type="text/javascript">
         function selectChanged() {
            var sel = document.getElementById('myselect');
            var str = sel.selectedIndex ? (sel.options[sel.selectedIndex].innerHTML + '') : 'Цена: 111';
            document.getElementById('mydiv').innerHTML = str;
         }
</script>

<select name="city" id="myselect">
         <option value="Цена:111">Котел 1</option>
         <option value="Цена:222">Котел 2</option>
         <option value="Цена:333">Котел 3</option>
         <option value="Цена:444">Котел 3</option>
</select>
<div id="mydiv">Цена: 111</div>

Но при выборе нужного элемента в диве вместо значение value отображается название, то есть Котел 1, Котел 2, Котел 3...

Что не так?

javascript
Источник: Stack Overflow на русском

Ответы

▲ 5Принят

Много лишнего. Так будет правильнее:

<select name="city" id="myselect">
     <option value="111">Котел 1</option>
     <option value="222">Котел 2</option>
     <option value="333">Котел 3</option>
     <option value="444">Котел 3</option>
</select>
<div id="mydiv">Цена: 111</div>

<script type="text/javascript">
    document.getElementById("myselect").addEventListener("change", function(){
      document.getElementById('mydiv').innerHTML = "Цена: "+this.value;   
    });
</script>

Fiddle