• easyui combo下拉框多选框


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

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

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

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

    <td>近期活动</td>
                        <td>
                                     <select id="activities" name="activities" data-options="editable:true,200" style="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进行了拼接,是不是很简单,代码就不一一介绍了,需要的话可以直接拷过去

  • 相关阅读:
    a Makefile
    Fedora的一些个人配置
    开机默认命令行
    挂载iso文件
    Vi不显示insert
    beego 框架基本使用 && 知识点整理
    kafka的安装及使用(单节点)
    Go 实现短 url 项目
    晓看天色暮看云,铁马冰河入梦来
    Go net/http,web server
  • 原文地址:https://www.cnblogs.com/weiloong/p/4810820.html
Copyright © 2020-2023  润新知