JavaScript Выпадающий список+текстовое поле

Discussion in 'PHP' started by alpotemkin, 30 Mar 2009.

  1. alpotemkin

    alpotemkin Elder - Старейшина

    Joined:
    7 May 2008
    Messages:
    57
    Likes Received:
    1
    Reputations:
    0
    Доброго времени суток!

    Только начал работать с JavaScript'ом и у меня возникли некоторые вопросы.
    А вопрос такой: У меня есть список вида

    Code:
    <select id="select">
      <option>Первый вариант
      <option>Второй вариант
      </select>
<input type="text">

    Хотелось бы сделать, чтобы при выборе элемента "Второй вариант" появлялось текстовое поле, а при выборе элемента "Первый вариант" это поле не появлялось.

    P.S. Где-то вычитал такой вариант:

    назначить обработчик события change select'а:document.getElementById

    Code:
    ('select').onchange = function() {
    ...
}

    а в нем, в зависимости от выбранного пункта (this.selectedIndex или this.value), изменить свойство display textbox'а (textbox.style.display = 'none' или textbox.style.display = 'inline')

    Только я не совсем понял, как это сделать... Не трудно ли было бы выложить скрипт в полном виде, чтобы я смог разобраться, что и к чему.
    Заранее спасибо.
     
    #1 alpotemkin, 30 Mar 2009
  2. VAran

    VAran Elder - Старейшина

    Joined:
    29 May 2008
    Messages:
    51
    Likes Received:
    15
    Reputations:
    4
    <html>
    <head></head>
    <body>
    <script>
    function f1()
    {
    var s = document.getElementById("select");
    var t = document.getElementById("a1");
    if(s.selectedIndex)
    t.style.display = 'inline';
    else
    t.style.display = 'none';
    }
    </script>
    <select id="select" onchange = f1()>
    <option>Первый вариант</option>
    <option>Второй вариант</option>
    </select>
    <input type="text" style="display:none" id="a1">
    </body>
    </html>
     
    #2 VAran, 30 Mar 2009
    Last edited: 30 Mar 2009
  3. alpotemkin

    alpotemkin Elder - Старейшина

    Joined:
    7 May 2008
    Messages:
    57
    Likes Received:
    1
    Reputations:
    0
    Спасибо большое!
    Хотел бы уточнить момент, чтобы полностью понять принцип работы: выбор из вариантов делается:
    Code:
    var t = document.getElementById("a1");
    А если вариантов много,например 6, то делается:
    Code:
    var a = document.getElementById("select");
var b = document.getElementById("a1");
var c = document.getElementById("a2");
var d = document.getElementById("a3");
var e = document.getElementById("select");
var g = document.getElementById("a4");
    И выводится:
    Code:
    <input type="text" style="display:none" id="a1">
<input type="text" style="display:none" id="a2">
<input type="text" style="display:none" id="a3">
<input type="text" style="display:none" id="a4">
    или можно через запятую?
    Code:
    <input type="text" style="display:none" id="a1,a2,a3,a4">
     
    #3 alpotemkin, 30 Mar 2009
  4. Pashkela

    Pashkela Динозавр

    Joined:
    10 Jan 2008
    Messages:
    2,750
    Likes Received:
    1,044
    Reputations:
    339
    Code:
    <select id="select">
    <option value="0"></option>
    <option value="1">Первый вариант</option>
    <option value="2">Второй вариант</option>
    <option value="3">Третий вариант</option>
</select>
<input type="text" style="display:none" id="a1">
<script type="text/javascript">

var selectmenu=document.getElementById("select");
selectmenu.onchange=function() { 
 var chosenoption=this.options[this.selectedIndex];
 var t = document.getElementById("a1");
 if (chosenoption.value=="1" || chosenoption.value=="3" )  
      t.style.display = 'inline';
 else 
      t.style.display = 'none';
}

</script>
     
    #4 Pashkela, 30 Mar 2009
  5. KaZ@NoVa

    KaZ@NoVa Elder - Старейшина

    Joined:
    5 Jul 2008
    Messages:
    368
    Likes Received:
    438
    Reputations:
    -16
    пример хайда ;)
    HTML:
    <HTML>
<body>
<script>
function hide_show(val)
{
val =parseInt(val);
switch(val)
{

case 1:
document.getElementById('inp').style.display='none';
break; 
case 2:
document.getElementById('inp').style.display='inline';
}



}
</script>
<select id="select" onchange='hide_show(this.value)'>
<option value='1'>hide</option>
<option value='2'>show</option>
</select>
<input id="inp" type="text" style="display:none">
</body>
</HTML>
     
    #5 KaZ@NoVa, 30 Mar 2009
  6. alpotemkin

    alpotemkin Elder - Старейшина

    Joined:
    7 May 2008
    Messages:
    57
    Likes Received:
    1
    Reputations:
    0
    А чем хайд отличается (лучше) вышеперечисленных скриптов?
     
    #6 alpotemkin, 30 Mar 2009
  7. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    массив.

    Code:
    var a = document.getElementById("select");
var b = document.getElementById("a1");
var c = document.getElementById("a2");
var d = document.getElementById("a3");
var e = document.getElementById("select");
var g = document.getElementById("a4");
    Китайский стиль :)
     
    #7 astrologer, 30 Mar 2009
  8. alpotemkin

    alpotemkin Elder - Старейшина

    Joined:
    7 May 2008
    Messages:
    57
    Likes Received:
    1
    Reputations:
    0
    Возможно. :) Просто я только начал изучать JS, вот пока и путаюсь немного.
    За подсказку спасибо. :)
     
    #8 alpotemkin, 30 Mar 2009
(You must log in or sign up to post here.)