select ,option标签,点击之后,右边显示不同的内容

 

需求:

点击下拉菜单之后,根据菜单的不同,右侧显示不同的效果

如下:

 

点击自定义查询,右侧需要显示两个日期组件,如果没有日期组件,可以使用innerHtml来重新刷新对应div中的内容,但是加上日历组件之后,innerHtml不起作用

后来想到的解决方法如下:
写几个不同的div,点击哪个option,其他的option对应的div隐藏,点击的显示出来,完美解决!

代码如下:
 

<div class="hd_card1" id="part1">
    <div class="mySearch" id="hd_part1_1">
        <input type="text" placeholder="输入区域号" id="searchText">
        <!--<button class="btn btn-info btn-xs" type="button" onclick="searchAllPart()">查询</button>-->
        <select class="hd_drop_down_box" onclick="hd_drop_down_event(this.options[this.selectedIndex].value);">
            <option disabled="disabled" selected="selected">查询类型</option>
            <option value="weekQuery">按周查询</option>
            <option value="monthQuery">按月查询</option>
            <option value="yearQuery">按年查询</option>
            <option value="ownQuery">自定义查询</option>
        </select>
        <div class="dynamicDisplay">
            <div id="hd_part1_1_1" style="display: none">
                <h6 style="display: inline">近&nbsp;</h6>
                <input style="display: inline;width: 50px" placeholder='输入数字'/>
                <h6 style="display: inline">&nbsp;周</h6>
            </div>
            <div id="hd_part1_1_2" style="display: none">
                <h6 style="display: inline">近&nbsp;</h6>
                <input style="display: inline;width: 50px" placeholder='输入数字'/>
                <h6 style="display: inline">&nbsp;月</h6>
            </div>
            <div id="hd_part1_1_3" style="display: none">
                <h6 style="display: inline">近&nbsp;</h6>
                <input style="display: inline;width: 50px" placeholder='输入数字'/>
                <h6 style="display: inline">&nbsp;年</h6>
            </div>

            <div class="dynamicDisplay_detail" id="hd_part1_1_4" style="display:none;">
                <input class="js-datepicker " id="example-datepicker"
                       name="example-datepicker" placeholder="开始日期" value=""
                       data-date-format="yyyy-mm-dd"
                       style="width: 70px;text-align: center"/>
                <input placeholder="至"
                       style="width: 15px;background-color: #f9fafb;border-left-color:#f9fafb ;border-right-color: #f9fafb"
                       disabled="disabled"/>
                <input class="js-datepicker " id="example-datepicker1"
                       name="example-datepicker" placeholder="结束日期" value="" data-date-format="yyyy-mm-dd"
                       style="width: 70px;text-align: center"/>
            </div>
        </div>
    </div>
    <div id="hd_part1_2" style="height: 210px;width: 700px;">

    </div>
</div>

js部分代码如下:

<script>
        function hd_drop_down_event(value) {
            document.getElementById("hd_part1_1_1").style.display = "none";
            document.getElementById("hd_part1_1_2").style.display = "none";
            document.getElementById("hd_part1_1_3").style.display = "none";
            document.getElementById("hd_part1_1_4").style.display = "none";
            if (value === "weekQuery") {
                document.getElementById("hd_part1_1_1").style.display = "";
            } else if (value === "monthQuery") {
                document.getElementById("hd_part1_1_2").style.display = "";
            } else if (value === "yearQuery") {
                document.getElementById("hd_part1_1_3").style.display = "";
            } else if (value === "ownQuery") {
                document.getElementById("hd_part1_1_4").style.display = "";

            }

        }

 希望对您有所帮助!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值