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

最新推荐文章于 2023-09-26 07:57:38 发布

猫饭_ACE

最新推荐文章于 2023-09-26 07:57:38 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46459413/article/details/125209880

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript根据用户在第一个下拉框（选择公路）的选择，动态控制第二个下拉框的显示与隐藏。通过layui框架，通过监听'hySelect'和'hySelectTwo'事件，实现了基于值的条件控制。

摘要由CSDN通过智能技术生成

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
});