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

Question

I am trying to write a jQuery where a div is to be shown if a specific option is chosen from dropdown and a specific radio button is clicked.我正在尝试编写一个 jQuery 如果从下拉列表中选择特定选项并单击特定单选按钮，则将显示一个 div。 But I am unable to do so.但我无法这样做。

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>

Answer 1

Can you please check the below code?你能检查下面的代码吗？ Hope it will work for you.希望它对你有用。 We are creating a jquery code for hiding and show a div which is having id = test , we are adding a class name div and hide it on default.我们正在创建一个 jquery 代码来隐藏并显示一个id = test的 div，我们正在添加一个 class 名称div并默认隐藏它。 It will be shown when the “ AT Work ” option is selected from the dropdown and also shown when you click the “ Evening ” radio button.当从下拉列表中选择“ AT Work ”选项时会显示它，当您单击“ Evening ”单选按钮时也会显示它。 You can adjust it according to your requirement.您可以根据自己的要求进行调整。

Please refer to this link: https://jsfiddle.net/yudizsolutions/xayb9h1p/请参考此链接： 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>

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

问题描述

1 个解决方案

解决方案1
0 2021-04-21 11:31:18

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

问题描述

1 个解决方案

解决方案1 0 2021-04-21 11:31:18

解决方案1
0 2021-04-21 11:31:18