前端开发——下拉框（多选、单选、搜索、排序）

作者: 拿铁加冰 | 来源:发表于2018-08-28 18:19 被阅读1735次

前端开发——下拉框（多选、单选、搜索、排序）
Aries.net 下拉框多选排序
Html表单使用实例
Rails 页面多选下拉框, form_for, form_ta
更换单选与多选样式
企业微信选择图片JS-SKD
表格BootStrapTable（插件类）
数据分析知识图谱- part3
记录一次bug及项目中问题总结
easyui combobox复选框多选完整功能实现

需求
需要做一个下拉框组件，要求包含下拉列表前加一个多选框，勾选的列在下次打开时自动排在下拉列表前面置顶，点击列表中某一项，可以选中该项内容，并填充进展示框中，另外需要增加搜索功能，便于筛选下拉列表中的列。

分析
首先多选框，选用jquery自带的input类别为checkbox属性的多选框，处理点击事件，选中和取消选中，分别处理input的checkbox属性即可。
当确认多选框选中状态后，将选中的列内容存入数组，并将该数组存入localstorage。
再次打开下拉框的时候，从localstorage中取出存入的数组，遍历下拉框中各项内容，与该数组做对比，删除掉不重合的部分，再将该数组与得到的数组合并得到一个新的数组，最后将此数组按顺序分别赋值到下拉框中的各项内容。使完成排序需求。
另外，点击列表某一项，将选中内容填充展示框，可以直接在下拉框各列内容区域增加点击事件，处理内容填充到展示框即可。
最后，搜索功能，用一个input框，通过keyup事件，获取input每次输入的值，并与下拉框中的内容做对比，将包含该值的列筛选出来展示。
注意点：
主要是多种功能结合，在取值和筛选值的时候要注意原始值要发生变化，要保持随时更新值。

代码块

html

<div style="width:170px;position:relative;">
    <div class="jd-select form-control" style="width:170px;"></div>
    <div class="jd-select-cont">
        <input type="text" class="search-input" placeholder="搜索" />
        <ul>
            <li class="jd-li">
                <input type="checkbox" class=" checkbox-jd pull-left" value="1" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类1</span>
            </li>
            <li class="jd-li">
                <input type="checkbox" class="checkbox-jd pull-left" value="2" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类2</span>
            </li>
            <li class="jd-li">
                <input type="checkbox" class="checkbox-jd pull-left" value="3" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类3</span>
            </li>
            <li class="jd-li">
                <input type="checkbox" class="checkbox-jd pull-left" value="4" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类4</span>
            </li>
            <li class="jd-li">
                <input type="checkbox" class="checkbox-jd pull-left" value="5" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类5</span>
            </li>
        </ul>
        <div class="btn-cont">
            <div class="sure-btn" id="sure-btn">确定</div>
            <div class="cancel-btn" id="cancel-btn">取消</div>
        </div>
    </div>
</div>

jquery部分

var arrC;
var varrC;
var arrcheckd;
var varrcheckd;
var arrRecord;
var varrRecord;
var arr;
var varr;
var arrSearch;
var arrSearchChecked;
var varrSearch;
var varrSearchChecked;
$(document).ready(function() {
    arrC = new Array();
    varrC = new Array();
    arrcheckd = new Array();
    varrcheckd = new Array();
    arrcheckd = localStorage.getItem("arrcheckd");
    varrcheckd = localStorage.getItem("varrcheckd");
    arrRecord;
    varrRecord;
    arr = new Array();
    varr = new Array();
    if(arrcheckd) {
        arrRecord = arrcheckd.split(",");
        varrRecord = varrcheckd.split(",");
    } else {
        arrRecord = new Array();
        varrRecord = new Array();
    }
    $(".jd-select-cont ul li span").each(function() {
        var op = $(this).text();
        if($.inArray(op, arrRecord) == -1) {
            arr.push(op);
            varr.push($(this).prev("input").val());
        }
    });

    arr = arrRecord.concat(arr);
    varr = varrRecord.concat(varr);
});
//点击多选框事件
$("body").on('click', ".checkbox-jd", function() {
    if($(this).prop("checked")) {
        $(this).prop("checked");
        arrRecord.push($(this).next(".type-name").html());
        varrRecord.push($(this).val());
    } else {
        $(this).removeProp("checked");
        arrRecord.splice($.inArray($(this).next(".type-name").html(), arrRecord), 1);
        varrRecord.splice($.inArray($(this).val(), varrRecord), 1);
    }
});
//点击保存多选框事件
$("#sure-btn").click(function() {
    $(".jd-select-cont").hide();
    console.log("arrRecord.length===" + arrRecord.length)
    window.localStorage.setItem("arrcheckd", arrRecord.toString()); //存数据
    window.localStorage.setItem("varrcheckd", varrRecord.toString()); //存数据
});
//点击取消保存多选框事件
$(".cancel-btn").click(function() {
    $(".jd-select-cont").hide();
});
//点击展开下拉列表并排序   
$(".jd-select").click(function() {
    $(".jd-select-cont").show();
    $(".search-input").val("");
    searchJD("");
    //搜索
    arrSearch = new Array();
    arrSearchChecked = new Array();
    varrSearch = new Array();
    varrSearchChecked = new Array();
    $(".search-input").keyup(function() {
        var searchValue = $(".search-input").val();
        searchJD(searchValue);
    });
});

function showAll() {

    var arrNew = new Array();
    var varrNew = new Array();
    for(var i = 0; i < arr.length; i++) {
        if($.inArray(arr[i], arrRecord) == -1) {
            arrNew.push(arr[i]);
            varrNew.push(varr[i]);
        }
    };
    arrNew = arrRecord.concat(arrNew);
    varrNew = varrRecord.concat(varrNew);
    var html = '';
    for(var i = 0; i < arrRecord.length; i++) {
        html += '<li class="jd-li"><input type="checkbox" checked class=" checkbox-jd pull-left" value="' + varrNew[i] + '"  style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrNew[i] + '</span></li>';
    }
    for(var j = arrRecord.length; j < arrNew.length; j++) {
        html += '<li class="jd-li"><input type="checkbox" class=" checkbox-jd pull-left" value="' + varrNew[j] + '"  style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrNew[j] + '</span></li>';
    }
    $(".jd-select-cont ul").html(html);
};

function searchJD(searchValue) {
    if(searchValue == "") {
        showAll();
        return;
    } else {
        arrSearch = new Array()
        arrSearchChecked = new Array();
        var arrNew = new Array();
        varrSearch = new Array()
        varrSearchChecked = new Array();
        var varrNew = new Array();
        for(var i = 0; i < arr.length; i++) {

            if($.inArray(arr[i], arrRecord) == -1) {
                arrNew.push(arr[i]);
                varrNew.push(varr[i]);
            }

        };
        arrNew = arrRecord.concat(arrNew);
        varrNew = varrRecord.concat(varrNew);

        for(var i = 0; i < arrNew.length; i++) {
            if(arrNew[i].indexOf(searchValue) != -1) {
                arrSearch.push(arrNew[i]);
                varrSearch.push(varrNew[i]);
                if(i < arrRecord.length) {
                    arrSearchChecked.push(arrNew[i]);
                    varrSearchChecked.push(varrNew[i]);
                }
            }
        }

        var html = '';
        for(var i = 0; i < arrSearchChecked.length; i++) {

            html += '<li class="jd-li"><input type="checkbox" checked class=" checkbox-jd pull-left" value="' + varrSearchChecked[i] + '"  style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrSearchChecked[i] + '</span></li>';
        }
        for(var j = arrSearchChecked.length; j < arrSearch.length; j++) {

            html += '<li class="jd-li"><input type="checkbox" class=" checkbox-jd pull-left" value="' + varrSearch[j] + '"  style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrSearch[j] + '</span></li>';
        }
        $(".jd-select-cont ul").html(html);

    };
};
//点击选中下拉框中某一项
$("body").on('click', ".type-name", function() {

    $(".jd-select").html($(this).html());
        $(".jd-select-cont").hide();
    alert($(this).prev("input").val());
});

css部分

.jd-select {
    position: relative;
    
}
.jd-select-cont {
        display: none;
        position: absolute;
        left: 0;
        top: 33px;
        width: 170px;
        height: 280px;
        background: #FFFFFF;
        border: 1px solid #E1E1E1;
        .search-input{
           width: 170px;
           height: 28px;
           line-height: 28px;
           border: 1px solid #eee; 
        }
        ul {
            width: 100%;
            height: 210px;
            overflow: overlay;
            li {
                display: block !important;
                width: 100% !important;
                height: 30px;
                .type-name {
                    display: block;
                    width: 70%;
                    height: 30px;
                    line-height: 30px;
                }
            }
        }
        .btn-cont {
            width: 100%;
            height: 30px;
            padding: 10px 20px;
            .sure-btn {
                width: 50px;
                height: 20px;
                line-height: 20px;
                float: left;
                background: #4990E2;
                color: #fff;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
            }
            .cancel-btn {
                width: 50px;
                height: 20px;
                line-height: 20px;
                float: left;
                border-radius: 4px;
                border: 1px solid #4990E2;
                color: #4990E2;
                text-align: center;
                margin-left: 27px;
            }
        }
    }

效果图

111.png

小结：代码写的略乱，主要用作自我笔记，方便下次遇到该需求，能较快找到解决方法。

前端开发——下拉框（多选、单选、搜索、排序）
需求需要做一个下拉框组件，要求包含下拉列表前加一个多选框，勾选的列在下次打开时自动排在下拉列表前面置顶，点击列表中...
Aries.net 下拉框多选排序
Aries.net 下拉框多选排序在aries表格中，多选是添加属性规则。 $2{multiple:true} ...
Html表单使用实例
大纲 1、单选框多选框实现的商品选择2、添加下拉框和删除下拉框3、观察textarea中事件处理器的运行顺序推荐 ...
Rails 页面多选下拉框, form_for, form_ta
表单的多选下拉框在 web 项目中比较常用且常见，所以快速构建多选下拉框是每个 Rails 全栈开发者必备的技能。...
更换单选与多选样式
HTML： JQ： CSS：单选与多选img：单选：多选：
企业微信选择图片JS-SKD
开发功能点击选择图片，然后可以单选可进行多选，使用企业微信SDK开发代码
表格BootStrapTable（插件类）
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及...
数据分析知识图谱- part3
11.多选题研究多选题分析可分为四种类型包括：多选题、单选-多选、多选-单选、多选-多选。 “多选题分析”是针对...
记录一次bug及项目中问题总结
记录一次bug 今天同事碰到一个bug,让我看看。。。描述：下拉框，下拉选项模糊搜索，搜索后，单选框选中后，复原...
easyui combobox复选框多选完整功能实现
前言：前端项目用的easyui，要实现下拉框多选，带有复选框全选全不选功能，可奈何easyui combobox原...