根据select值显示或隐藏div

js代码

$(function() {
            $(".activity_end").show();
	        $(".low_price").hide();
	        $(".new_goods").hide();
            //给div添加change事件
            $("#template").change(function() {

			    if($(this).val() == 1){
			        $(".activity_end").show();
			        $(".low_price").hide();
			        $(".new_goods").hide();
			    }
			    if($(this).val() == 2){
			        $(".activity_end").hide();
			        $(".low_price").show();
			        $(".new_goods").hide();
			    }
			    if($(this).val()==3){
			        $(".activity_end").hide();
			        $(".low_price").hide();
			        $(".new_goods").show();
			    }
			})
        })

html代码:

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,可以的。您需要使用jQuery中的change事件来监听select标签的的变化,然后根据不同的选择要隐藏的元素,使用jQuery中的hide()函数来隐藏这些元素。以下是示例代码: ```javascript $(document).ready(function(){ $("select").change(function(){ var selectedValue = $(this).children("option:selected").val(); if(selectedValue === "value1"){ $("#element1").hide(); $("#element2").show(); } else { $("#element1").show(); $("#element2").hide(); } }); }); ``` 请注意,示例代码中的元素ID和选项是根据您的具体需求进行更改的。 ### 回答2: 使用 jQuery 可以根据 select 标签的来判定其他元素是否隐藏。下面是一段简单的代码示例: ```html <select id="mySelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <div id="element1"> 元素 1 </div> <div id="element2"> 元素 2 </div> <div id="element3"> 元素 3 </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 监听 select 标签的改变事件 $('#mySelect').change(function() { // 获取当前 select 标签的 var selectedValue = $(this).val(); // 根据 select 标签的判断要隐藏的元素 if (selectedValue == 'option1') { $('#element1').hide(); } else if (selectedValue == 'option2') { $('#element2').hide(); } else if (selectedValue == 'option3') { $('#element3').hide(); } }); }); </script> ``` 以上代码实现了当 select 标签的改变时,根据选中的来判定要隐藏的元素。每个 `<div>` 元素都有一个唯一的 id,根据选中的选项,使用 jQuery 的 `hide()` 方法来隐藏对应的元素。 注意,上述代码中引入了 jQuery 库,确保在代码中添加正确的 jQuery 引用路径。 ### 回答3: 使用jQuery可以很方便地根据select标签的来判断和隐藏其他元素。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>根据select标签判定元素隐藏</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("select").change(function(){ var selectedValue = $(this).val(); // 获取选中的 if(selectedValue === "hide"){ // 如果选中的为"hide" $(".hide-element").hide(); // 隐藏class为"hide-element"的元素 } else if(selectedValue === "show"){ // 如果选中的为"show" $(".hide-element").show(); // 显示class为"hide-element"的元素 } }); }); </script> </head> <body> <select> <option value="hide">隐藏元素</option> <option value="show">显示元素</option> </select> <div class="hide-element"> 这是要隐藏的元素 </div> <div class="hide-element"> 这是要隐藏的另一个元素 </div> </body> </html> ``` 以上代码通过监听select标签的change事件,获取选中的。根据选中的来判断隐藏还是显示其他元素。当选中的为"hide"时,使用jQuery中的hide()方法隐藏所有class为"hide-element"的元素;当选中的为"show"时,使用show()方法显示所有class为"hide-element"的元素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值