Выпадающие списки

Discussion in 'PHP' started by SultanOFF, 9 Dec 2009.

  1. SultanOFF

    SultanOFF Member

    Joined:
    4 Jun 2009
    Messages:
    156
    Likes Received:
    6
    Reputations:
    0
    Здравствуйте. Есть необходимость сделать на сайте с помощью js выпадающие списки. Допустим в первом выпадающем списке человек из вариантов тест1, тест2, тест3 выбирает тест2 появляется еще один выпадающий список. как можно подобное реализовать? какие у кого идеи? Помогите пожалуйста :)
     
  2. L I G A

    L I G A Banned

    Joined:
    27 Jul 2008
    Messages:
    482
    Likes Received:
    380
    Reputations:
    49
    http://webdesign.site3k.net/?/conjuncture/append/d/menudrop.html
     
  3. SultanOFF

    SultanOFF Member

    Joined:
    4 Jun 2009
    Messages:
    156
    Likes Received:
    6
    Reputations:
    0
    решил делать вот так:
    Code:
    <html>
      <head>
        <script>
          function dis(a, b) {
            a.form.elements[b].disabled = (a.value != 1);
          }
        </script>
      </head>
      <body>
        <form name="form1">
          <select name="sel1" onchange="dis(this, 'sel2')">
            <option value="1">1
            <option value="2">2
            <option value="3">3
          </select>
          <select name="sel2">
            <option value="1">1
            <option value="2">2
            <option value="3">3
          </select>
        </form>
      </body>
    </html>
    но есть еще одна функция:
    Code:
    function validate (elem)
    {
        var text = elem.value;
        var result = "";
        for ( var i = 0; i < text.length; i++ )
            if ( text.charAt (i) >= "0" && text.charAt (i) <= "9" ) result += text.charAt (i);
        elem.value = result;
    }
    function imgOpen (n)
    {
        document.getElementById ("img").src = "http://site.com/1/" + n.toString() + ".jpg";
        document.getElementById ("img_block").style.display = "block";
    }
    которая выводит изображения вот так:
    Code:
    <input type="text" id="img_n" onkeyup="validate (this);" onblur="validate (this);" onchange="validate (this);" />
    <input type="button" onclick="imgOpen(document.getElementById ('img_n').value);" value="Показать!" />
    и собственно вопрос как сделать чтобы например если в первом селекте выбрано значение 1 то селект2 становится доступным, и если допустим в селект2 выбрано значение 1 то ссылка http://site.com/1/ если выбрано значение 2 то ссылка становится http://site.com/2/ ??? Что то никак понять не могу :(
     
  4. Gray_Wolf

    Gray_Wolf Active Member

    Joined:
    7 Mar 2009
    Messages:
    377
    Likes Received:
    135
    Reputations:
    10
    Ну это как я понял вы уже сделали.
    Хотя можно сделать это не через elements.disabled, а просто через display='none'

    Ну а почему нельзя просто использовать глобальную переменную?
    Code:
    <script>
    var imgDir=0;
    //далее функция которая заносит то что выбрали во втором селекте в переменную imgDir
    //ну и изменяем фенкцию imgOpen
    function imgOpen (n)
    {
        document.getElementById ("img").src = "http://site.com/"+ imgDir.toString() +"/" + n.toString() + ".jpg";
        document.getElementById ("img_block").style.display = "block";
    }
     </script>
     
  5. SultanOFF

    SultanOFF Member

    Joined:
    4 Jun 2009
    Messages:
    156
    Likes Received:
    6
    Reputations:
    0
    пожалуйста можете привести пример данной функции :)
     
  6. Gray_Wolf

    Gray_Wolf Active Member

    Joined:
    7 Mar 2009
    Messages:
    377
    Likes Received:
    135
    Reputations:
    10
    Code:
    <html>
      <head>
        <script>
    	var imgDir=1;//даём 1-е значение из списка, т.к. ф-ия setPath у нас вызывается только при изменении
          function dis(a, b) {
            a.form.elements[b].disabled = (a.value != 1);
          }
    	  function setPath(value) {
    		  imgDir=value;
    		  alert(imgDir);
    	  }
        </script>
      </head>
      <body>
        <form name="form1">
          <select name="sel1" onchange="dis(this, 'sel2')">
            <option value="1">1
            <option value="2">2
            <option value="3">3
          </select>
          <select name="sel2" onchange="setPath(value)">
            <option value="1">1
            <option value="2">2
            <option value="3">3
          </select>
        </form>
      </body>
    </html>
    
     
    #6 Gray_Wolf, 10 Dec 2009
    Last edited: 10 Dec 2009
  7. SultanOFF

    SultanOFF Member

    Joined:
    4 Jun 2009
    Messages:
    156
    Likes Received:
    6
    Reputations:
    0
    спасибо огромное Gray_Wolf Вы Мне очень помогли :)
     
  8. b3

    b3 Moderator

    Joined:
    5 Dec 2004
    Messages:
    2,041
    Likes Received:
    933
    Reputations:
    199
    Выпадающие с писки
    http://anton.shevchuk.name/wp-demo/jquery-tutorials/accordion1.html
     
    _________________________