Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > динамическая замена <select> на <input>

Автор: Panopticum 7.7.2010, 01:53

ТЗ
сделать выпадающий список (вместо ячейки Страна) «Выберите страну», в котором можно будет выбрать: одру из трех позиций (Украина, Россия, Другие страны), При нажатии Другие страны – поле очищается и человек просто вводит текст.

я так понимаю нужно написать функцию при вызове которой тег <select> и все его содержимое будет удалятся и на место него будет вписываться тег <input> ?
javascript учил очень давно по этому уже мало что помню, подскажите как реализовать выше сказанное.

зарание благодарен за ответ.

Автор: Fiyanov 7.7.2010, 09:06

помещаешь тег select в div
то есть:

Код


<div id="mydiv">
   <select>
   </select>
</div>

у селекта на онченж пишеш функцию
в функции
Ищешь див по id
заменяешь innerHTML этого дива на '<input type="text" value="введите страну">'

Всё.

Автор: CruorVult 7.7.2010, 09:27

зачем удалять, добавляешь на стринацу скрытый <input ... style="display:none">. при выборе onchange из селекта cкрываешь его и показываешь инпут.

Автор: Panopticum 7.7.2010, 11:12

вот что написал, не работает, в чем проблема может быть?

Код


<div id="myid">
            <select id="sel_1 "size="1" name="sel1">
                <option disabled selected value="Выбирите страну">Выбирите страну</option>
                <option value="Украина">Украина</option>
                <option value="Россия">Россия</option>
                <option onclick="func()" value="Другие страны">Другие страны</option>
            </select>
        </div>
        <input type="submit" value="Отправить">
        <script type="text/javascript">
            function func(){
                var Div = document.getElementById(myid);
                Div.innerHTML = '<input type="text" value="введите страну">';
            }
        </script>

Автор: CruorVult 7.7.2010, 12:29

кавычки забыли:

Код


var Div = document.getElementById('myid');

Автор: Panopticum 7.7.2010, 13:12

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

Автор: bars80080 7.7.2010, 14:39

select всё-таки не кликабельная штука. основной его обработчик: <select onchange="func()">, а не на оптионс вешать

Автор: ex3c 7.7.2010, 17:08

Код


function func( a ) {
var x = document.createElement('input');
x.type = 'text';
a.parentNode.insertBefore( x, a.nextSibling );
a.parentNode.removeChild( a );
}

Код


<select onchange="func( this );" …