Help Me - SELECT&INPUT

penguen

Постоялец
Регистрация
7 Янв 2007
Сообщения
842
Реакции
109
Не уверен, поможет это или нет, но вдруг пригодится. Я делал что-то похожее, только с radio кнопками. Можно ввести либо текст полной статьи, либо ссылку на неё. В зависимости от выбора переклчаются поля ввода (input или textarea). Вот код, собственно, там все понятно.

Код:
<script>
function foo(id) {
    if ( id == 'r1' ) {
        document.getElementById("link").style.display = 'none';
        document.getElementById("text").style.display = 'block';
    }
    if ( id == 'r2' ) {
        document.getElementById("link").style.display = 'block';
        document.getElementById("text").style.display = 'none';
    }
}
</script>
 
<form action="#" name="post" method="POST">
    <input type='radio' name='handle' id='r1' onclick='foo(this.id);' checked value='1'/>Добавить текст статьи<br />
    <input type='radio' name='handle' id='r2' onclick='foo(this.id);' value='2'/>Добавить ссылку на статью<br />
 
    <div id="link" style="display: none;">
        <input type='text' name='link' size='70' />
    </div>
 
    <div id="text" style="display: block;">
        <textarea id="arttext" name="text" cols="90" rows="7"></textarea>
    </div>
 
    <input type="submit" value="Добавить!" style="width:200px"/>
</form>
 
Не уверен, поможет это или нет, но вдруг пригодится. Я делал что-то похожее, только с radio кнопками. Можно ввести либо текст полной статьи, либо ссылку на неё. В зависимости от выбора переклчаются поля ввода (input или textarea). Вот код, собственно, там все понятно.

Код:
<script>
function foo(id) {
    if ( id == 'r1' ) {
        document.getElementById("link").style.display = 'none';
        document.getElementById("text").style.display = 'block';
    }
    if ( id == 'r2' ) {
        document.getElementById("link").style.display = 'block';
        document.getElementById("text").style.display = 'none';
    }
}
</script>

<form action="#" name="post" method="POST">
    <input type='radio' name='handle' id='r1' onclick='foo(this.id);' checked value='1'/>Добавить текст статьи<br />
    <input type='radio' name='handle' id='r2' onclick='foo(this.id);' value='2'/>Добавить ссылку на статью<br />

    <div id="link" style="display: none;">
        <input type='text' name='link' size='70' />
    </div>

    <div id="text" style="display: block;">
        <textarea id="arttext" name="text" cols="90" rows="7"></textarea>
    </div>

    <input type="submit" value="Добавить!" style="width:200px"/>
</form>

И к чему это? Что за бред? Набор постов?

А на самом деле все просто:
Держи кусочек кода:

Код:
<style>
#hide_address_to{
  display: none;
}
#hide_address_from{
  display: none;
}
</style>
<select id="choose" name="choose">
    <option value="1">one away</option>
    <option value="2">Return</option>
</select>
<p id="hide_address_to"><label for="address_to">Address to</label><input type="text" id="address_to" name="address_to" value="" /></p>
<p id="hide_address_from"><label for="address_from">Аddress From</label><input type="text" id="address_from" name="address_from" value="" /></p>
<script type="text/javascript">
    var sChoose = document.getElementById("choose");


    sChoose.onchange = function(){
      var addressFrom = document.getElementById("hide_address_from");
      var addressTo = document.getElementById("hide_address_to");

      if(this.options[this.selectedIndex].value == "1"){
            addressFrom.style.display = "block";
            addressTo.style.display = "none";

      } else if(this.options[this.selectedIndex].value == "2"){
            addressFrom.style.display = "none";
            addressTo.style.display = "block";

      };
    };


</script>

Два слова, заключаем наши поля в контейнеры с id: hide_address_to для поля address_to, и с id: hide_address_from для поля address_from
Скрываем поля css ами:
#hide_address_to{
display: none;
}
#hide_address_from{
display: none;
}
Присваиваем id: choose для select а.
Внутри две опции: one away с value = 1, и вторая опция Return с value 2
А потом пускаем в ход яваскрипт.
Где проверяем событие onchange (изменения) для селекта choose, если при изменении value == "1", то показываем контейнер с id: hide_address_to, и скрываем контейнер с id: hide_address_from, если же для селекта choose, если при изменении value == "2", то наоборот.
 
<div id="text" style="display: block;"> <textarea id="arttext" name="text" cols="90" rows="7"></textarea> </div> <input type="submit" value="Добавить!" style="width:200px"/> </form>
 
Назад
Сверху