How could I make a some info show if a certain option is selected in dropdown

Discussion in 'JavaScript' started by x0x, Jan 15, 2010.

0
  1. #1
    Lets say I have this dropdown:

    select name="tab">
    <option selected="selected" value="no">no</option>
    <option value="yes">yes</option>
    </select>

    How could I make another dropdown appear in a certain place if "yes" is selected in the first one (it should disappear if it's changed back to "no"). Any advice?
     
    x0x, Jan 15, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    I think this will help you

    
<html>

<head>
  <title>Dropdown Appear</title>
  <script type="text/javascript">
    function dropdown_appear(){
      if(document.getElementById("tab").value=="yes"){
        document.getElementById("another_dropdown_div").style.display = "";
      }else{
        document.getElementById("another_dropdown_div").style.display = "none";
      }
    }
  </script>
</head>

<body>

<select name="tab" id="tab" onchange="dropdown_appear();">
<option selected="selected" value="no">no</option>
<option value="yes">yes</option>
</select>

<div id="another_dropdown_div" style="display: none">
    <select name="another_dropdown" id="another_dropdown">
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
        <option value="option3">Option3</option>
    </select>
</div>

</body>

</html>
    Code (markup):
     
    s_ruben, Jan 16, 2010 IP
  3. x0x

    x0x Well-Known Member

    Messages:
    510
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Thanks. Can I add more stuff between the div tags to be hidden? I tried adding a table row but that didn't work...
     
    x0x, Jan 16, 2010 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Write here the script that doesn't work.
     
    s_ruben, Jan 16, 2010 IP
  5. x0x

    x0x Well-Known Member

    Messages:
    510
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #5 
     <tr>
        <td>Do this:
          
          <br />
          <br /></td>
        <td><select name="dissolve" id="dissolve" onchange="dropdown_appear();">

          <option selected="selected" value="no">no</option>
          <option value="yes">yes</option>
          </select></td>
      </tr>
      <div id="delun_div" style="display: none">
      <tr>        

        <td align="left">Do this too:</td>
        <td align="left">
        
    <select name="delun" id="delun">
        <option selected="selected" value="no">no</option>
        <option value="yes">yes</option>

    </select>
</td>

      </tr>
      </div>
    Code (markup):
    Only the value names are changed. It works perfectly when I leave the <tr>and <td> out from the div tags.
     
    x0x, Jan 18, 2010 IP
  6. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #6
    Try so

    
<tr>
        <td>Do this:

          <br />
          <br /></td>
        <td><select name="dissolve" id="dissolve" onchange="dropdown_appear();">

          <option selected="selected" value="no">no</option>
          <option value="yes">yes</option>
          </select></td>
      </tr>

      <tr id="delun_div" style="display: none">

        <td align="left">Do this too:</td>
        <td align="left">

    <select name="delun" id="delun">
        <option selected="selected" value="no">no</option>
        <option value="yes">yes</option>

    </select>
</td>

      </tr>
    Code (markup):
     
    s_ruben, Jan 18, 2010 IP
  7. x0x

    x0x Well-Known Member

    Messages:
    510
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #7
    Thank you!
     
    x0x, Jan 18, 2010 IP