Question

我有一个选择菜单（下拉列表）。

<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>

＆安培;以下div位于我页面的某个位置。

<div id="somediv">This is a string.</div>

我想在选择菜单的第二项（id="two"）时显示上面的div。

我有两个问题：（1）默认情况下隐藏此div的最佳方法是什么？我只想在其样式中添加display:none;，但也许有更好的解决方案？ （2）如果选择id="two"选项，如何让div显示？任何答案都将不胜感激。

Answer 1

所以我编写了一个简单的jquery脚本来执行你所描述的内容。如果它能解决您的问题，请告诉我。你也可以用javascript做到这一点，但我认为jquery适用于此就好了。 http://codepen.io/Francisco104/pen/vEPRgp

$('select').change(function(){
  decide($(this));
});
var decide = function (elem) {
    var touch = elem;
  if (touch.val() === 'anything') {
   return $('#somediv').css('display', 'block');
  }
};

Answer 2

默认情况下隐藏它，使用style="display: none"是最简单的。您可以使用jquery $('div#somediv').hide();来完成它，但除了您可能希望将显示/隐藏逻辑保持在一起之外，我没有看到任何其他好处。

以下是使用change()事件的两个简单解决方案。

如果在div#somediv被选中后应永久显示option#two：

$("select").change(function() {
    if ($(this).val() == 'anything') $('div#somediv').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>

如果在选择div#somediv时应显示option#two，并且如果用户选择其他选项则会消失：

$("select").change(function() {
    $('div#somediv').toggle($(this).val() == 'anything');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>

你也应该给id一个select，以使jQuery选择器不那么脆弱。

Answer 3

所以，我有一个div的课程，比方说，is-hidden我的CSS会有.is-hidden { display: none; }。然后，执行以下操作。

HTML：

<div id="somediv" class="is-hidden">This is a string.</div>

JS：

$div = $("#somediv");
$("select").on("change", function() {
    $div.is(".is-hidden") || $div.addClass("is-hidden");

    //Option 1
    if ($(this).find(":selected")[0].id === "two") {
        $div.removeClass("is-hidden");
    }

    //Option 2 (same as above, but a bit shorter)
    $(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden");
});

Answer 4

1）您可以隐藏最初提供 css属性 display:none;的div或使用 javascript 设置其显示属性将在初始加载中运行。

2）您可以收听选择字段的 onchange事件，并检查值是否为＆＃39;任何内容＆＃39;然后在其他情况下通过将显示样式属性更改为block和hidden来显示div。

＆＃13;
＆＃13;
document.getElementById("somediv").style.display='none'; var showHideDiv=function(selectField){ var divElement=document.getElementById("somediv"); if (selectField.value=='anything') divElement.style.display='block'; else divElement.style.display='none'; }
＆＃13;
<select onchange='showHideDiv(this)'> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> <div id="somediv">This is a string.</div>
＆＃13;
＆＃13;
＆＃13;

Answer 5

以下是您可以做的事情：

你的html文件中的

：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<select>
  <option id="one" value="something">Car</option>
  <option id="two" value="anything">Plane</option>
</select>

您需要导入JQuery库（我在<select>元素的正上方显示），以便您可以执行脚本。

在你的css文件中：

#somediv {
    display: none;
}

最后这里的脚本将显示潜水时＃34;飞机＆＃34;被选中

$('select').change(function(){
    $('#somediv').css('display','block');
});

看一下我为你制作的JSFIDDLE。

Answer 6

在HTML中隐藏的最简单方法

<div hidden>content</div>

显示隐藏的div

（文档）$。就绪（函数（）{

$（“select”）。change（function（）{ $（“select option：selected”）。each（function（）{

            if($(this).attr("value")=="anything"){


                $("#somediv").show();

            }

}）;. }）;

Answer 7

显示无效。

您是否尝试过关注onchange事件？ http://www.w3schools.com/jsref/event_onchange.asp？

显示选项选择的div

7 个答案: