时间戳

首页 > 解决方案 > 在选择下拉菜单和单选按钮时显示或隐藏 div

javascript - 在选择下拉菜单和单选按钮时显示或隐藏 div

问题描述

我正在尝试编写一个 jQuery，如果从下拉列表中选择特定选项并单击特定单选按钮，则将在其中显示 div。但我无法这样做。

Html
<pre><code>
<html>
</body>
    <select name="Location of positive event" id="dropdown">
        <option value="home">At home</option>
        <option value="commute">On my commute</option>
        <option value="work">At work</option>
        <option value="outside">On the street</option>
        <option value="other">Other</option>
        </select>
    

    <label>
        Morning
        <input name="time-radio" type="radio" value="1">
        </label>
        <label>
        Evening
        <input name="time-radio" type="radio" value="2">
        </label>
    

    <div id="test">
        <label>
        <input name="test1" value="test!" type="checkbox">
        Test1
        </label>
        <label>
        <input name="test1" value="test@" type="checkbox">
        Test1
        </label>
        </div>
</body>
</html>
</code></pre>

标签： javascripthtmljquerycss

解决方案

你能检查下面的代码吗？希望它对你有用。我们正在创建一个用于隐藏和显示 div 的 jquery 代码id = test，我们正在添加一个类名div并默认隐藏它。当从下拉列表中选择“<code>AT Work”选项时将显示它，当您单击“<code>Evening”单选按钮时也会显示它。您可以根据自己的要求进行调整。

请参考此链接：https ://jsfiddle.net/yudizsolutions/xayb9h1p/

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".box").not("." + optionValue).hide();
        $("." + optionValue).show();
      }
    });
  }).change();
});

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box2").not(targetBox).hide();
    $(targetBox).show();
  });
});
.box,
.box2 {
  display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<pre><code>
<html>
<body>
    <select name="Location of positive event" id="dropdown">
      <option>Select</option>
        <option value="home">At home</option>
        <option value="commute">On my commute</option>
        <option value="work">At work</option>
        <option value="outside">On the street</option>
        <option value="other">Other</option>
        </select>
    

    <label>
        Morning
        <input name="time-radio" type="radio" value="1">
        </label>
        <label>
        Evening
        <input name="time-radio" type="radio" value="2">
        </label>
    

    <div id="test" class="box work ">
    <h2>for Dropdown</h2>
        <label>
        <input name="test1" value="test!" type="checkbox">
        Test1
        </label>
        <label>
        <input name="test1" value="test@" type="checkbox">
        Test2
        </label>
        </div>
        <div id="test1" class="box2  2">
        <h2>for Radio Button</h2>
        <label>
        <input name="test3" value="test!" type="checkbox">
        Test3
        </label>
        <label>
        <input name="test4" value="test@" type="checkbox">
        Test4
        </label>
        </div>
</body>
</html>

推荐阅读