easyui的下拉复选combobox

最新推荐文章于 2021-03-09 09:57:02 发布

张祠

最新推荐文章于 2021-03-09 09:57:02 发布

阅读量549

点赞数

分类专栏： web前端文章标签： combo box easyui

本文链接：https://blog.youkuaiyun.com/zhanghong0603/article/details/56479393

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在EasyUI中使用下拉复选框Combobox，包括js文件的引入、页面元素设置以及JavaScript的初始化和操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入js
 <script type="text/javascript" src="static/easyui/easyloader.js"></script> <script type="text/javascript" src="static/easyui/locale/zh_cn.js"></script> <script type="text/javascript" src="static/easyui/themes/icon.css"></script> <script type="text/javascript"> easyloader.theme = "metro" ; </script>

二、页面

<td>
<input type="text" id="sealState" name="sealState" title="全部印章状态" value=""/>
<input type="hidden" id="sealStateIds" name="sealStateIds"  value="${pd.sealStateIds}"/>
</td>

三、js初始化及使用combobox

<script type="text/javascript">

        $(function() {

            //加载印章状态项sealStateList为后台获取的list
            var combobox_datas = [] ;
            <c:forEach items="${sealStateList}" var="sState">
            combobox_datas.push({"id":"${sState.standardCode}" , "text" : "${sState.name}"});
            </c:forEach>
            using('combobox', function(){
                     //初始化combobox
                $('#sealState').combobox({    
                    data:combobox_datas,    
                    multiple:true,
                    valueField:'id',    
                    textField:'text'   
                });  
                //设置默认显示
                $('#sealState').combobox('setText',"请选择状态");
                //回显下拉复选
                var sealStateIds= "${pd.sealStateIds}";
                if(!empty(sealStateIds))
                {
                    var stateArry = sealStateIds.split(",");
                    $('#sealState').combobox('setValues',stateArry);
                }
            });

        });

        //检索
        function search(){          
            var sealState = $('#sealState').combobox('getValues');
            $("#sealStateIds").val(sealState); 
            $("#StuffForm").submit();
        }
</script>