复选框添加后不起效果

添加复选框,html相关要素都添加了,但不起效果

img

    <div class="panel-body">
                    <form id="formSearch" class="form-horizontal">
                    <input id="bu" name="bu" th:value="${bu}"  type="hidden">
                        <div class="form-group" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="title">较小周</label>
                            <div class="col-sm-1">
                                <input type="text" class="form-control" name="title" id="wkone" value="WK">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_statu">较大周</label>
                            <div class="col-sm-1">
                                <input type="text" class="form-control" id="wktwo" value="WK">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_statu"></label>
                            <div class="col-sm-1">
                                <input type="text" class="form-control" id="year">
                            </div>                    
                            <label class="control-label col-sm-1"  for="txt_search_statu">月份:</label>
                            <div class="col-sm-1">
                                   <div id="month" class="xm-select-demo"></div>      
                            </div>                                    
                            <div class="col-sm-2" style="text-align:left;">
                                <button type="button" style="margin-left:60px" id="btn_query" class="btn btn-primary" onclick="reLoad()">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

js

<script type="text/javascript" src="/js/plugins/select/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/js/plugins/select/xm-select.js"></script>

css

<link href="/css/plugins/select/bootstrap-select.min.css">

bootstrap居于jquery,jquery导入了吗?同时F12打开控制台看是否报错,并且link标签少了rel属性,缺少rel="stylesheet"样式会无效


<link rel="stylesheet"  href="/css/plugins/select/bootstrap-select.min.css">

如果用的xm-select,这个是居于layUI的,需要导入layUI相关资源,下面代码测试正常

<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
<link rel="stylesheet"  href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
<div class="panel-body">
    <form id="formSearch" class="form-horizontal">
        <input id="bu" name="bu" th:value="${bu}" type="hidden">
        <div class="form-group row" style="margin-top:15px">
            <label class="control-label col-sm-1" for="title">较小周</label>
            <div class="col-sm-1">
                <input type="text" class="form-control" name="title" id="wkone" value="WK">
            </div>
            <label class="control-label col-sm-1" for="txt_search_statu">较大周</label>
            <div class="col-sm-1">
                <input type="text" class="form-control" id="wktwo" value="WK">
            </div>
            <label class="control-label col-sm-1" for="txt_search_statu"></label>
            <div class="col-sm-1">
                <input type="text" class="form-control" id="year">
            </div>
            <label class="control-label col-sm-1" for="txt_search_statu">月份:</label>
            <div class="col-sm-1">
                <div id="month" class="xm-select-demo"></div>
            </div>
            <div class="col-sm-2" style="text-align:left;">
                <button type="button" style="margin-left:60px" id="btn_query" class="btn btn-primary" onclick="reLoad()">查询</button>
            </div>
        </div>
    </form>
</div>
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
<script type="text/javascript" src="https://maplemei.gitee.io/xm-select/xm-select.js"></script>
<script>
    var demo2 = xmSelect.render({
        el: document.querySelector('#month'),
        data: [
            { name: '张三', value: 1 },
            { name: '李四', value: 2 },
            { name: '王五', value: 3 },
        ]
    })
</script>


img

你用的是

<script type="text/javascript" src="/js/plugins/select/xm-select.js"></script> 

这个插件做的下拉复选框,所以需要点击才能显示的

是我把选项框的选项加载放在页面reload里面了,不点击查询出不来,解决了哈哈

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632