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進行了拼接,是不是很簡單,代碼就不一一介紹了,需要的話可以直接拷過去


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM