Как вывести значение выбранного селекта в блок?
Всем доброго времени суток! Есть селект такого вида:
<select id="id3" name="option[230]" class="select-menu"> <option value="21" points="0" price_prefix="+" price="0.0000">1 </option> <option value="22" points="0" price_prefix="+" price="1000.0000">2 (+1000.00 р.) </option> <option value="23" points="0" price_prefix="+" price="2000.0000">3 (+2000.00 р.) </option> <option value="24" points="0" price_prefix="+" price="3000.0000">4 (+3000.00 р.) </option> </select> Нужно вывести значение выбранного опшн, например 3(+2000.00 р.) в другой блок. Как определить? Как сделать? Опшн выбирается скриптом.:help: плииз! |
// var select = ??? , короче селект должен быть определен var selectedOption = select.selectedOption; alert(selectedOption.innerHTML); |
Цитата:
<p id="selectedOption"></p> <script type="text/javascript"> var selectedOption = select.selectedOption; alert(selectedOption.innerHTML); </script> Так? Не выводит ничего:cray: . |
var selectedOption = document.getElementById('id3').selectedOption;
document.getElementById('selectedOption').innerHTML = selectedOption.innerHTML;
|
Ошибка: Uncaught TypeError: Cannot read property 'innerHTML' of undefined
|
Там jquery подключен
|
Тьфу блин.
var selectedOption = document.getElementById('id3').selectedOptions[0];
document.getElementById('selectedOption').innerHTML = selectedOption.innerHTML;
|
результат:undefined
но ошибка пропала |
Ну мож тогда
selectedOption.innerText || selectedOption.textContent || '' Хотя проще функцию из библиотеки jQuery использовать: $(selectedOption).text() |
И как в итоге, чет не соображу
|
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<select id="id3" name="option[230]" class="select-menu">
<option value="21" points="0" price_prefix="+" price="0.0000">1</option>
<option value="22" points="0" price_prefix="+" price="1000.0000">2(+1000.00 р.)</option>
<option value="23" points="0" price_prefix="+" price="2000.0000" selected="selected" >3(+2000.00 р.)</option>
<option value="24" points="0" price_prefix="+" price="3000.0000">4(+3000.00 р.)</option>
</select>
<script>
var select = document.getElementById('id3');
var indx = select.selectedIndex || 0;
alert(select.options[indx].text);
</script>
</body>
</html>
|
выводит!!:no: при загрузке страницы только, первое значение. Надо обработчик какой-нибудь что-ли
|
Супер!, только не алертом надо, а в отдельный блок. Сорри, только сейчас понял, что не совсем корректно вопрос задал. Имеется: селект, который при загрузке страницы имеет опшн 0. Надо: выводить значение опции (не вэлью, а текст в тэгах option) в отдельный блок при выборе опции мышкой. Видимо функция для обработчика нужна, чтоб менялось содержимое при выборе.
|
<select id="id3" name="option[230]" class="select-menu" onchange="kategory();"> <option value="21" points="0" price_prefix="+" price="0.0000">1 </option> <option value="22" points="0" price_prefix="+" price="1000.0000">2 (+1000.00 р.) </option> <option value="23" points="0" price_prefix="+" price="2000.0000">3 (+2000.00 р.) </option> <option value="24" points="0" price_prefix="+" price="3000.0000">4 (+3000.00 р.) </option> </select>
<script type="text/javascript">
function kategory()
{
var selectedOption = document.getElementById('id3').selectedOptions[0];
document.getElementById('selectedOption').innerHTML = selectedOption.innerHTML;
}
</script>
Да заработало!! Только при начальной загрузке страницы не отображает, как решить? onload написать? |
Цитата:
|
Хм, действительно, оказывается это HTML5 свойство и оно имеет хреновую поддержку среди браузеров (старых по крайней мере): http://stackoverflow.com/questions/1...ions-broken-or
Так что лучше избегать его использования пока что. |
дааа, в ie не работает: SCRIPT5007: Не удалось получить свойство "0" ссылки, значение которой не определено или является NULL
Спотыкается на этой строчке: window.opener.kategory() в мозилле тоже, но ie только kategory() не работает, а в ней window.opener не понимает и что делать? |
Почему то думал что это старое свойство, так как свойства selectedIndex недостаточно , учитывая что селекты могут быть такими:
<select multiple size=2> <option>Bla Bla Bla</option> <option>Bla Bla Bla</option> </select> Как же в таких случаях получать массив выбраных опшнов? |
danik.js,
Цитата:
|
Ну это понятно - тупой перебор в цикле.
Мне вот интересно о чем думал человек, предложивший свойство multiple, но не подумавший о том, как же получить список выбранных опшнов. |
вместо
window.opener.id3.selectedIndex = $(this).attr("kat");
написал
window.opener.document.getElementById('id3').selectedIndex = $(this).attr("kat");
в мозилле заработало, а как сделать с window.opener.kategory() не знаю. Не подскажете почтеннейшие? |
вместо
Цитата:
function kategory()
{
var selectedOption = $('#id3 option:selected').text();
document.getElementById('selectedOption').innerHTML = selectedOption.innerHTML;
}
почему не работает? вроде по аналогии |
Цитата:
function kategory()
{
var selectedOption = $('#id3 option:selected').text();
document.getElementById('selectedOption').innerHTML = selectedOption;
}
|
Спасибо рони и danik.js, узнал много нового!
|
| Часовой пояс GMT +3, время: 07:38. |