Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   document.getElementById и select (https://javascript.ru/forum/dom-window/25342-document-getelementbyid-i-select.html)

Q012 02.02.2012 01:15

document.getElementById и select
 
Доброго времени суток всем. У меня такой вопрос к знающим людям.
Есть форма
<form name="qwe">
<select onchange="document.getElementById('id_2').innerHTML=this.options[this.selectedIndex].value;" ;>
<option  value =" "></option>
<option  value=1>бла</option>
<option value=2>бла бла</option>
<option  value=3 >бла бла бла</option>
</select>
</form>	   
<div id="id_2"></div>

При выборе значения из списка, на страницу выводится номер 1, 2, 3. Подскажите как мне выводить текст в зависимости от выбранного элемента. Не номер, не бла, бла бла, а свой текст? За ранее спасибо.

Aetae 02.02.2012 01:34

<script>
values=[
'ноль',
'один',
'два',
'три'
]
values.undefined = 'нетути';

</script>
<form name="qwe">
<select onchange="document.getElementById('id_2').innerHTML=values[this.selectedIndex]">
<option  value =" "></option>
<option  value=1>бла</option>
<option value=2>бла бла</option>
<option  value=3 >бла бла бла</option>
</select>
</form>	   
<div id="id_2"></div>

Q012 02.02.2012 01:55

Спасибо

sept 22.03.2013 15:52

А что сделать, чтобы values.undefined = 'не тупи'; заработало?

<script>
values=[
'ноль',
'один',
]
values.undefined = 'не тупи';

</script>
<form name="qwe">
<select onchange="document.getElementById('id_2').innerHTML=values[this.selectedIndex]">
<option  value =" "></option>
<option  value=1>бла</option>
<option value=2>бла бла</option>
<option  value=3 >бла бла бла</option>
<option  value=4 >бла бла бла бла</option>
</select>
</form>	   
<div id="id_2"></div>

danik.js 22.03.2013 17:03

id_2.innerHTML = values[this.selectedIndex] || 'не тупи'


Можно еще так:
<form name="qwe">
    <select onchange="id_2.innerHTML = selectedOptions[0].getAttribute('data-text') || 'не тупи'">
        <option value=0 data-text="ноль"></option>
        <option value=1 data-text="одын">бла</option>
        <option value=2 data-text="двы">бла бла</option>
        <option value=3>бла бла бла</option>
        <option value=4>бла бла бла бла</option>
    </select>
</form>     
<div id="id_2"></div>

devote 22.03.2013 17:04

document.getElementById('id_2').innerHTML=this.value

danik.js 22.03.2013 17:16

Цитата:

Сообщение от devote
document.getElementById('id_2').innerHTML=this.val ue

Ну да, если форма не сабмитится, то это самый простой и логичный вариант )

sept 22.03.2013 17:18

Цитата:

Сообщение от danik.js (Сообщение 242052)
id_2.innerHTML = values[this.selectedIndex] || 'не тупи'

Вот то что нужно!
Большое спасибо! :dance:

devote 22.03.2013 18:09

Цитата:

Сообщение от sept
Вот то что нужно!

вот это:
Цитата:

Сообщение от danik.js
id_2.innerHTML =

очень плохая практика, не нужно так использовать, не смотря на то что оно работает... Это изжитки прошлого, от которого никак избавится браузерописатели не могут по причине того что все еще есть прогеры которые не понимают того что так делать нельзя. Пишите нормально:
Цитата:

Сообщение от devote
document.getElementById('id_2').innerHTML=


devote 22.03.2013 18:16

и так тоже:
Цитата:

Сообщение от sept
values[this.selectedIndex] || 'не тупи'

правильный вариант:
document.getElementById('id_2').innerHTML=this.value

самый правильный вариант:
<form name="qwe">
    <select id="my_select">
        <option value="0"></option>
        <option value="1">бла</option>
        <option value="2">бла бла</option>
        <option value="3">бла бла бла</option>
        <option value="4">бла бла бла бла</option>
    </select>
</form>     
<div id="id_2"></div>

<script type="text/javascript">
    (function() {
        var texts = [
                "ololol",
                "hahaha",
            ],
            select = document.getElementById('my_select'),
            id2 = document.getElementById('id_2'),
            eventHandler = function() {
                id2.innerHTML = texts[select.value] || "не тупи";
            }

        if (select.addEventListener) {
            select.addEventListener('change', eventHandler, false);
        } else {
            select.attachEvent('onchange', eventHandler);
        }
    })();
</script>


Часовой пояс GMT +3, время: 16:11.