Home > Article > Web Front-end > Multi-selectable drop-down list box based on jquery_jquery
Multi-selectable drop-down list box based on jquery_jquery
- WBOYOriginal
- 2016-05-16 17:51:341391browse
Colleagues found bugs in the drop-down list box that they found on the Internet, such as incorrect positioning and slow loading. Anyway, the implementation of the multi-select drop-down list box is very simple. Instead of looking at the messy structure of the code, it is better to re-implement it yourself.
Look at the effect first: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html
JS:
Copy code The code is as follows:
(function ($) {
$.fn.extend({
MultDropList: function (options) {
var op = $.extend({ wraperClass: "wrapper", width: "150px", height: "200px", data: "", selected: "" }, options);
return this.each(function () {
var $this = $(this); //Point to TextBox
var $hf = $(this).next(); //Point to hidden control storage
var conSelector = "#" $this.attr("id") ",#" $hf.attr("id");
var $wrapper = $(conSelector).wrapAll("
var $list = $('').appendTo($wrapper);
$list.css({ "width": op.width, "height": op.height });
//Control Showing and hiding pop-up pages
$this.click(function (e) {
$list.toggle();
e.stopPropagation();
});
$(document ).click(function () {
$list.hide();
});
$list.filter("*").click(function (e) {
e.stopPropagation ();
});
//Load default data
$list.append('
- All
var $ul = $list.find("ul");
//Loading json data
var listArr = op.data.split("|");
var jsonData;
for (var i = 0; i < listArr.length; i ) {
jsonData = eval("(" listArr[i] ")");
$ul.append('
}
//Load the check option
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(","));
});
//Select all or all Uncheck
$("li:first input", $ul).click(function () {
if ($(this).attr("checked")) {
$("li input ", $ul).attr("checked", "checked");
}
else {
$("li input", $ul).removeAttr("checked");
}
});
//When clicking other check boxes, update the hidden control value and the value of the text box
$("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:
Copy code The code is as follows:
.wrapper
{
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:
Copy code The code is as follows:
< ;div style="margin-left: 300px; height: 30px;">