Dropdown List with content for each option (<select>,<option>)

Question

I just try to make a Dropdown List. When I'm clicking at one option, I want, that for each option a specific content (text) appears. But I have no idea, how I can do this. Here's the code:

<html>
  <body>
    <form name="dropdown-list">
      <select>
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
  </body>
</html>

Answer 1

use jquery.. assign ID to your select element and use below code

$('#select-id').change(function() {
    //piece of code to do when option changes
})

Answer 2

我认为您需要使用Javascript。

Answer 3

I think this will do the trick. We are gonna hide all other blocks that we don't need and will appear the only one that we need

<html>
    <head>
      <style>
        .yourContentHere {
            display: none;
        }
        .activeContent {
           display: block;
        }
      </style>
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    </head>
    <body>

     <form name="dropdown-list">

      <select>

       <option value="1" selected="selected">1</option>

       <option value="2">2</option>

       <option value="3">3</option>

      </select>

     </form>

    <div id="yourDropdownChoiceContent">
      <div class="yourContentHere activeContent">This wiil appear if we click dropdown 1</div>
      <div class="yourContentHere">This wiil appear if we click dropdown 2</div>
      <div class="yourContentHere">This wiil appear if we click dropdown 3</div>
    </div>
    <script>
    $('select').change(function(){
        var chosenOption = $('select option:selected').index()
        $('.yourContentHere').removeClass('activeContent')
        $('.yourContentHere').eq(chosenOption).addClass('activeContent')
    });
    </script>
 </body>
</html>

Dropdown List with content for each option (<select>,<option>)

Question

3 answers

solution1
1 2013-02-02 18:28:42

solution2
0 2013-02-02 18:47:03

solution3
0 2013-02-02 19:10:21

Dropdown List with content for each option (<select>,<option>)

Question

3 answers

solution1 1 2013-02-02 18:28:42

solution2 0 2013-02-02 18:47:03

solution3 0 2013-02-02 19:10:21

solution1
1 2013-02-02 18:28:42

solution2
0 2013-02-02 18:47:03

solution3
0 2013-02-02 19:10:21