当一个下拉框的选项发生值改变时,页面上其他元素展示也同步变化

北极糊的狐

已于 2022-10-12 14:35:51 修改

阅读量1.8k

点赞数 1

分类专栏：代码记录工作汇总文章标签：前端 servlet java

于 2022-07-29 15:50:29 首次发布

本文链接：https://blog.csdn.net/SSHLY3/article/details/125804450

版权

代码记录同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

工作汇总

12 篇文章 0 订阅

订阅专栏

描述：

今天遇到一个问题，就是新增人员的时候分两种渠道，如果是市场部那么不用试用期，如果是战略部就需要填写试用期的相关输入框；简单来说就是战略部有试用期相关信息要填，市场部不用；下面截取了图片展示两种选项对试用期这些输入框的影响

思路：

可以把这些分情况展示的输入框用一个div装起来，再给这个基本法输入框添加点击事件并绑定此div，根据点击后的下拉值来校验控制试用期div的显示与否

代码：

这六个需要控制的试用期元素用一个名为"attribute"的div装起来：

<div class="row" id = "attribute">
                    <div class="col-sm-4">
                        <#input id="probationPeriodStartDate" name="试用期开始日期" readonly="readonly"  underline="true" required="true"/>
                        <#input id="protectPeriodStartDate" name="考核保护期开始日期" readonly="readonly"  underline="true" required="true"/>
                    </div>
                    <div class="col-sm-4">
                        <#input id="probationPeriodEndDate" name="试用期结束日期" underline="true" clickFun="laydate({istime: false, format: 'YYYY-MM-DD',choose:TPersonInfoDlg.joinWorkDate})"/>
                        <#input id="protectPeriodEndDate" name="考核保护期结束日期" underline="true" clickFun="laydate({istime: false, format: 'YYYY-MM-DD',choose:TPersonInfoDlg.joinWorkDate})"/>
                    </div>
                    <div class="col-sm-4">
                        <#select id="probationPeriodLength" name="试用期时长" underline="true" required="true">
                            <option value="">请选择</option>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </#select>
                        <#select id="protectPeriodLength" name="考核保护期时长" underline="true">
                            <option value="">请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </#select>
                    </div>
                </div>

在底部给这个基本法类别下拉框(teamType)写元素值改变(change)事件：


        $("#teamType").change(function(){
            var index=$("#teamType option:checked").val();
            if(index=='1'){
                $("#attribute").css("display","block");
            }else{
                $("#attribute").css("display","none");
            }
        });

这样就可以在用户选择或修改了基本法类别下拉框(teamType)时，根据所选择的下拉选项对应的值index作为判断条件，来决定上面这个div的显示与否，这里注意none是直接不显示，下面的页面元素直接上移，不留空白