下拉多选列表实现

为什么80%的码农都做不了架构师？>>>   

$(function(){
    $.fn.LoadMultCheckbox=function(url){
        $(this).css("position","relative");
        $(this).append("<input key='searchText'/>");

        $("input[key='searchText']").click(function(){
            var width = $("input[key='searchText']").width();
            $("div[key='hiddenDiv']").width(width);
            if ($("div[key='hiddenDiv']").is(":hidden"))
            {
                $("div[key='hiddenDiv']").show();
            }else{
                $("div[key='hiddenDiv']").hide();
            }
        });

        $("input[key='searchText']").change(function(){
            var _search = $(this).val();
            var _searchArr = _search.split(";");

            var optNum = 0;
            while (_opt=$("input[key='optionInput_"+(optNum++)+"']"),_opt.length > 0){
                var _val = _opt.val();
                var flag = false;
                for (var i=0;i<_searchArr.length;i++){
                    if (_val == _searchArr[i]){
                        flag = true;
                        break;
                    }
                }
                if (flag){
                    _opt.prop("checked","true");
                }
                else{
                    _opt.prop("checked","");
                }
            }
        });

        $(this).append("<div key='hiddenDiv'></div>");
        $("div[key='hiddenDiv']").css({"display":"none","height":"250px","overflow":"auto","position":"absolute","z-index":"10","background":"#FFF"});

        $.ajax({
            url:url,
            type:"POST",
            dataType:'json',
            success:function(json){
                //alert(json._data.length);
                for (var i=0;i<json._data.length;i++){
                    $("div[key='hiddenDiv']").append("<input key='optionInput_"+i+"' type='checkbox' value='"+json._data[i].value+"'><label key='optionLabel_"+i+"'>"+json._data[i].text+"</label><br>");
                    $("input[key='optionInput_"+i+"']").bind("click",function(){
                        var _search = $("input[key='searchText']");
                        if ($(this).is(":checked")){
                            if (_search.val() == ""){
                                _search.val($(this).val());
                            } else{
                                _search.val(_search.val()+";"+$(this).val());
                            }
                        }
                        else{
                            var _searchStr = _search.val();
                            var _searchArr = _searchStr.split(";");
                            for (var j=0; j<_searchArr.length; j++){
                                if ((_searchArr[j] == $(this).val())){
                                    for (var flg=j; flg<_searchArr.length-1; flg++)
                                    {
                                        _searchArr[flg] = _searchArr[flg+1];
                                    }
                                    _searchArr.length--;
                                    break;
                                }
                            }
                            _search.val(_searchArr.join(";"));
                        }
                    });
                    $("label[key='optionLabel_"+i+"']").bind("click",function(){
                        $("input[key='optionInput_"+$(this).attr('key').split("_")[1]+"']").trigger("click");
                    });
                }
            },
            error:function(){
                alert('error');
            }
        });
    }
});

页面添加：

$("div[key='listCheckbox']").LoadMultCheckbox("ajax-listdata!readList.action");

<div key="listCheckbox"></div>

数据读取：

public class AjaxListdataAction extends ActionSupport{
public String readList(){
    List<JSONObject> dataRows=new ArrayList<JSONObject>();
    Map<String, Object> data = new HashMap<String, Object>();
    Map<String,String> rMap;

    for (int i=0;i<10;i++){
        rMap = new HashMap<String,String>();
        rMap.put("value","value_"+i);
        rMap.put("text","text_"+i);
        dataRows.add(JSONObject.fromObject(rMap));
    }
    data.put("_data",dataRows);
    return ajaxJson(JSONObject.fromObject(data).toString());
}
｝

样式有待调整，显示结果：

转载于:https://my.oschina.net/buobao/blog/417871