包含每个选项内容的下拉列表(<选择>，<选项>）

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

本文关键字：选项 选择 下拉列表 包含每      更新时间：2023-09-26

我只是尝试制作一个下拉列表。当我单击一个选项时，我希望每个选项都会出现特定内容（文本）。但我不知道，我该怎么做。代码如下：

<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>

使用 jquery.. 将 ID 分配给您的选择元素并使用以下代码

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

我认为你需要使用Javascript。

我认为这可以解决问题。我们将隐藏所有其他不需要的块，并且将显示我们唯一需要的块 

<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>
相关文章：