easyui combo下拉框多选框

按照自己的方式,先晒下效果图:

选一个值,那么就在input里面显示一个,去掉勾选,那么input就会少一个

其实做法很简单,今天就是快下班了,闲着没事加篇博客而已,下面带上代码。

1.页面的展示,input,其中prolist是从后台传过来的modl,从后台查到的数据,放到了request域中,前台进行接下值

<td>近期活动</td>
                    <td>
                                 <select id="activities" name="activities" data-options="editable:true,width:200" style="width:200px;height:30px"></select>
                              <div id="sp">
                                <c:forEach items="${prolist }" var="b">
                                    <input type="checkbox" name="activities" value="${b.id}">
                                    <span>${b.name}</span>
                                    <br />
                                </c:forEach>
                            </div>
                            
                           </td>     

2.js代码展示,附上这些代码,简单的多选框就搞定了

$(function() {
        $('#activities').combo({
            required : true,
            editable : true,
            multiple : true
        });
        $('#sp').appendTo($('#activities').combo('panel'));

        $("#sp input")
                .click(
                        function() {
                            var _value = "";
                            var _text = "";
                            $("[name=activities]:input:checked").each(function() {
                                
                                _value += $(this).val() + ",";
                                
                                _text += $(this).next("span").text() + ",";
                            });
                            //设置下拉选中值
                            $('#activities').combo('setValue', _value).combo(
                                    'setText', _text);
                        });
    });

保存到后台的是id,选了多个的话,就是把这些id进行了拼接,是不是很简单,代码就不一一介绍了,需要的话可以直接拷过去

转载于:https://www.cnblogs.com/weiloong/p/4810820.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值