Question

我有一个简单的下拉列表。

<h2>Nice car</h2>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

现在我想从下拉列表中为特定选项选择添加标题。

当我选择奥迪时，我想添加一个h2，它会说＆＃34; Nice Car！＆＃34;在下拉列表下方。

当我直接添加标题时，它会以整个下拉列表显示，我希望一旦选择了一个选项就显示它。

默认情况下我会给它visibility:hidden，一旦我选择了一个选项，我怎么能visibility:visible。

Answer 1

$(document).ready(function(){

  $(".dropdown").on("change",function(){
     $("#heading").css("visibility","visible");
      
  });
});

#heading
{
  visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="heading">Nice car</h2>
<select class="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

您可以尝试这样的事情：

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<h2 id="message" style="display: none;">Nice car</h2>

<script>
    $(function(){
        $("#cars").change(function(){
            $("#message").show();
        });
     });
</script>

$(function(){
    $("#cars").change(function(){
        $("#message").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
</select>
<h2 id="message" style="display: none;">Nice car</h2>

Answer 3

在css中使用display:none进行隐藏。这样，它还会移除<h1>和display:block的高度以显示

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".dropdown").on("change",function(){
                $("#heading").css("display","block");
            });
        });
    </script>
    <style>
        #heading{
            display:none;
        }
    </style>



    <h2 id="heading">Nice car</h2>
    <select class="dropdown">
         <option value="volvo">Volvo</option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
         <option value="audi">Audi</option>
    </select>

Answer 4

＆＃13;

$(document).ready(function(){

  $(".dropdown").on("change",function(){
     if($(this).val() == "audi"){
     $("#heading").css("visibility","visible");}
     else{
     $("#heading").css("visibility","");}
  });
});

＆＃13;

#heading
{
  visibility:hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="heading">Nice car</h2>
<select class="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

＆＃13;

Answer 5

这是每个选定选项的自定义消息

<body>

<h2 id='heading'>Nice car</h2>
<select id='dropdown'>
  <option message="nicecar1" value="volvo">Volvo</option>
  <option message="nicecar2" value="saab">Saab</option>
  <option message="nicecar3" value="mercedes">Mercedes</option>
  <option message="nicecar4" value="audi">Audi</option>
</select>


</body>

<script>

$(document).ready(function(){

                    $("#heading").hide();
                  $("#dropdown").on("change",function(e){

                     $("#heading").show();
                     console.log($("#dropdown option:selected").attr("message"));
                   $("#heading").text($("#dropdown option:selected").attr("message"));

                  });
             });

</script>

单击时将可见性从隐藏更改为可见

5 个答案: