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

最新推荐文章于 2021-04-26 13:14:45 发布

if_i_were_a

最新推荐文章于 2021-04-26 13:14:45 发布

阅读量1.1k

点赞数

分类专栏：毕设问题总结

本文链接：https://blog.csdn.net/if_i_were_a/article/details/105633272

版权

毕设问题总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求：

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

如下:

点击自定义查询，右侧需要显示两个日期组件，如果没有日期组件，可以使用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 = "";

            }

        }

希望对您有所帮助！