【JS】根据第一个单选框的值，来进行展示或隐藏第二个单选框

曾经终败给现在 2023-09-28 09:58 11阅读 0赞

# JS根据第一个单选框的值，来进行展示或隐藏第二个单选框 #

**需求：两个单选框，当第一个单选框选择的是公路时，则第二个单选框显示；如果第一个单选框选择的是其它选项，则第二个单选框隐藏。**

jsp代码：

<select name="city" lay-filter="hySelect">
        <option value=""></option>
        <option value="0">餐饮</option>
        <option value="1">零售</option>
        <option value="2">旅游</option>
        <option value="3">民航</option>
        <option value="4">公路</option>
        <option value="5">铁路</option>
    </select>
    <select name="gonglu" lay-filter="hySelectTwo" id = "gonglu">
        <option value=""></option>
        <option value="401">轨道</option>
        <option value="402">货运</option>
        <option value="403">客运</option>
    </select>

在css中增添隐藏样式：

.not-show{
        
      display: none !important;
    }

js代码：  
在第一个单选框中根据用户选择的值，来控制第二个单选框是否进行隐藏

const formTest = layui.form;
    let formData = {
        }
    formTest.on('select(hySelect)', function (data) {
        
        formData.hy = data.value
        if(formData.hy==="4"){
        
            $(".fiveInOne-class .layui-form-select").last().removeClass("not-show")
        }else {
        
            $(".fiveInOne-class .layui-form-select").last().addClass("not-show")
        }
    });
    formTest.on('select(hySelectTwo)', function (data) {
        
        formData.gonglu = data.value
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 js获取单选框/多选框选中的值value

注意给value值 <input type="radio" name="sex" checked="checked" value="男">男 <input

偏执的太偏执、/ 2024年03月26日 20:05/ 0 赞/ 102 阅读

相关【JS】根据第一个单选框的值，来进行展示或隐藏第二个单选框

JS根据第一个单选框的值，来进行展示或隐藏第二个单选框需求：两个单选框，当第一个单选框选择的是公路时，则第二个单选框显示；如果第一个单选框选择的是其它选项，则第二个单选

曾经终败给现在/ 2023年09月28日 09:58/ 0 赞/ 12 阅读

相关 js 多选框&单选框

此多选框、单选框可以换按钮皮肤，只更改雪碧图的定位即可。没有使用自带的控件，是重新写的。用到了模块化开发，类的导出导入，类的继承。 <!-- html部分

向右看齐/ 2023年07月07日 12:57/ 0 赞/ 40 阅读

相关 jquery获取单选框复选框下拉框值

jquery获取单选框（radio）复选框（checkbox）下拉框（select）的值，亲测可用。有什么疑问可以留言效果图： ![20160218153630060][

男娘i/ 2022年08月20日 08:28/ 0 赞/ 430 阅读

相关关于表单中单选框与复选框的几个小知识点

1.多选框设置只能选中一个 $('\registerForm').find('input\[type=checkbox\]')

￡神魔★判官ぃ/ 2022年05月21日 00:16/ 0 赞/ 105 阅读

相关 vue.js 添加动态的下拉框，单选框，多选框

1.下拉框 <FormItem label="关联题目类型" prop="questionTypeId"> <Select v-model

╰半橙微兮°/ 2022年05月11日 11:40/ 0 赞/ 933 阅读

相关 jQuery 单选框/复选框美化

对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现基础篇

我不是女神ヾ/ 2022年05月10日 00:08/ 0 赞/ 516 阅读

相关 layui默认选中第一个单选框

$('input:radio[name=productionTaskStatus]')[0].checked = true; layui.form.r

Myth丶恋晨/ 2022年04月13日 12:15/ 0 赞/ 952 阅读

相关 AngularJS单选、复选框

　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：一.AngularJS radio单选实例　　在页面上有几个项目名称，

清疚/ 2022年04月06日 10:51/ 0 赞/ 678 阅读

相关复选框checkbox,单击行单选,单击复选框也单选

$('table').on('click', 'tr', function (e) { //选择checkbox判断事件 if (e.t

太过爱你忘了你带给我的痛/ 2021年09月15日 15:10/ 0 赞/ 875 阅读