Help Me - SELECT&INPUT

Тема в разделе "JavaScript", создана пользователем penguen, 12 июл 2013.

Модераторы: ZiX
  1. penguen

    penguen

    Регистр.:
    7 янв 2007
    Сообщения:
    825
    Симпатии:
    95


    Есть такой код, может его требуется модифицировать.


    Помогите реализовать задачу.
     
  2. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Не уверен, поможет это или нет, но вдруг пригодится. Я делал что-то похожее, только с 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>
    
     
  3. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    176
    Симпатии:
    103
    И к чему это? Что за бред? Набор постов?

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

    Код:
    <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", то наоборот.
     
  4. AntiBash666

    AntiBash666 Писатель

    Регистр.:
    1 сен 2013
    Сообщения:
    5
    Симпатии:
    0
    <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>