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>

danik.js 22.03.2013 20:21

Цитата:

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

Теперь это стандарт, а значит так делать можно. Хотя сам я не в восторге от такого метода. Просто в пихая в атрибут, хочется по максимуму сократить код, при этом опуская даже ключевое слово this. Код из атрибута, как показано devote, тоже предпочтительней вынести в скрипт.

Yuricson 08.12.2013 13:23

Ребята, а как то же самое в input=text сделать? Код:
Код:

<script>
values=[
'36 000',
'38 000',
]
</script>
<form name="qwe">
<select onchange="document.getElementById('id_2').innerHTML=values[this.selectedIndex];">
<option  value=140*200 см>140*200 см</option>
<option  value=160*200 см>160*200 см</option>
</select>
<input type="text" name="price" value="36 000" size="25">
</form>         

<div><span id="id_2">36 000</span> рублей</div>

Надо что бы такое же значение в input передать. Совсем в JS не шарю.

danik.js 08.12.2013 19:15

Точно также, только свойство не .innerHTML, а .value
Ну и если инпут в той же форме, то можно вместо document.getElementById написать this.form.inputName (где inputName имя инпута (атрибут name)).

Yuricson 08.12.2013 20:26

this.form.inputName('price').value=values[this.selectedIndex]
Не работает. Или я что то не так делаю.

danik.js 08.12.2013 20:39

this.form.price.value=values[this.selectedIndex]


Кстати не проще ли сделать так:
<form name="qwe">
<select onchange="form.price.value = this.value">
<option  value="36 000">140*200 см</option>
<option  value="38 000">160*200 см</option>
</select>
<input type="text" name="price" value="36 000" size="25">
</form>


И между прочим значения с пробелами нужно оборачивать в кавычки.

Yuricson 08.12.2013 20:44

Большое спасибо! Всё работает.

Yuricson 08.12.2013 21:36

Нет не проще, нужно передать другой странице и размер и цену. Хотя может и есть решения проще.

Venzeles 23.04.2014 17:20

Цитата:

Сообщение от danik.js (Сообщение 242052)
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>

Все бы хорошо, но не работает в IE и Safari, как быть?

danik.js 23.04.2014 20:59

Помоему selectedOptions не кроссбраузерное.
Venzeles, пробуй this[this.selectedIndex].getAtt...

GreenJo 28.04.2014 14:27

Привет всем

Профессор подскажите можно ли сделать следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script>
/*функция, отображающая результат на странице */
function changeResult(result){
  document.getElementById('result').innerHTML = result;
}

/*функция, проводящая непосредственно вычисления */
function calculateForm(){

   var result = document.getElementById('id_2').value=prices;
  changeResult(result);
}
</script>
</head>

<body>
<script>
var prices=[
' ',
880,
2360,
2530
]
</script>

<form id="f">
<select onchange="document.getElementById('id_2').innerHTML=prices[this.selectedIndex]">
<option  value =" "></option>
<option  value=1>Глухая дверь ДГ001</option>
<option value=2>Межкомнатная дверь ДО002</option>
<option  value=3 >Межкомнатная дверь ДО003</option>
</select>
</form>
<div id="id_2"></div>
<!--Кнопка рассчитать -->
  <div onClick="calculateForm();" style="cursor:hand;cursor:pointer;">Рассчитать</div>


<!-- Контейнер вывода результата -->
<div id="result"></div>

</body>
</html>


Сделать сложение.
При нажатии рассчитать выходят все значения prices, не могу сделать чтоб выходили числа по значению value подскажите плиз.

M-ka 28.04.2014 14:50

GreenJo,
на onchange передайте в стороннюю функцию ну или в анонимную через this текущее значение выбранного элемента, уберите пробел для значения по умолчанию.
В обработчике, если думаете передавать именно цифры, проверти тип значения, если пришла не цифра, сделать возврат... ну а дальше, если только пара значений, можно через ифы, если много, через switch. Но если делать через switch, тогда и не обязательно делать проверку ожидаемого типа данных, зависит, будет ли вызвана функция внутри для каждого случая или переписано базовое значение с последующим вызовом функции.
Да и еще, так, как пытаетесь запускать изменение не с единого место, то лучше использовали единый обработчик, как на изменение выбранного значения, так и на нажатие кнопки, который сам будет просто каждый раз вытаскивать текущее активное значение.

GreenJo 28.04.2014 15:02

Я немного слабоват в js если не трудно можешь в данной строчке внести поправку, наглядно я лучше пойму

M-ka 28.04.2014 15:37

GreenJo,
просто, если это сделает кто то, а не вы сами, вы не научишься применять...
что за чем и как должно работать, схему описал, попробуй реализовать... Разбей на шаги описание и шаг за шагом, ищи, что как делается, тогда сможешь запомнить... просто написанное мной, довольно таки легкое, если не сможешь этого реализовать, то что будет дальше...? думаю, что ничего хорошего...


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