欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于jquery的可多选的下拉列表框_jquery

程序员文章站 2022-04-30 08:24:29
...
同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个。

先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html

JS:
复制代码 代码如下:

(function ($) {
$.fn.extend({
MultDropList: function (options) {
var op = $.extend({ wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: "" }, options);
return this.each(function () {
var $this = $(this); //指向TextBox
var $hf = $(this).next(); //指向隐藏控件存
var conSelector = "#" + $this.attr("id") + ",#" + $hf.attr("id");
var $wraper = $(conSelector).wrapAll("
").parent().parent().addClass(op.wraperClass);
var $list = $('').appendTo($wraper);
$list.css({ "width": op.width, "height": op.height });
//控制弹出页面的显示与隐藏
$this.click(function (e) {
$list.toggle();
e.stopPropagation();
});
$(document).click(function () {
$list.hide();
});
$list.filter("*").click(function (e) {
e.stopPropagation();
});
//加载默认数据
$list.append('
  • 全部
');
var $ul = $list.find("ul");
//加载json数据
var listArr = op.data.split("|");
var jsonData;
for (var i = 0; i jsonData = eval("(" + listArr[i] + ")");
$ul.append('
  • ' + jsonData.v + '
  • ');
    }
    //加载勾选项
    var seledArr;
    if (op.selected.length > 0) {
    seledArr = selected.split(",");
    }
    else {
    seledArr = $hf.val().split(",");
    }
    $.each(seledArr, function (index) {
    $("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked");
    var vArr = new Array();
    $("input[class!='selectAll']:checked", $ul).each(function (index) {
    vArr[index] = $(this).next().text();
    });
    $this.val(vArr.join(","));
    });
    //全部选择或全不选
    $("li:first input", $ul).click(function () {
    if ($(this).attr("checked")) {
    $("li input", $ul).attr("checked", "checked");
    }
    else {
    $("li input", $ul).removeAttr("checked");
    }
    });
    //点击其它复选框时,更新隐藏控件值,文本框的值
    $("input", $ul).click(function () {
    var kArr = new Array();
    var vArr = new Array();
    $("input[class!='selectAll']:checked", $ul).each(function (index) {
    kArr[index] = $(this).val();
    vArr[index] = $(this).next().text();
    });
    $hf.val(kArr.join(","));
    $this.val(vArr.join(","));
    });
    });
    }
    });
    })(jQuery);
    $(document).ready(function () {
    $("#txtTest").MultDropList({ data: $("#hfddlList").val() });
    });


    CSS:
    复制代码 代码如下:

    .wraper
    {
    position: relative;
    }
    .list
    {
    width: 200px;
    height: 200px;
    overflow: auto;
    position: absolute;
    border: 1px solid #617775;
    display: none;
    background: none repeat scroll 0 0 #F0F6E4;
    float: left;
    }
    .list ul li
    {
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-top: 1px solid black;
    }
    ul
    {
    list-style:none outside none;
    }

    HTML:
    复制代码 代码如下: