网页下拉列表实现多选

     今天在做一个网页的时候需要完成下拉的时候选择多个,刚开始打算用原生javascript代码实现,后来发现有点困难,网上查了下可以用jquery的插件实现后来还是自己结合jquery实现了上述效果!

1、先看看效果

           网页下拉列表实现多选     网页下拉列表实现多选

2.代码实现

2.1 静态页面部分

<body>

<ul class="main_ul">

<li class="main_li">

<a id="main_a">

<input id="smsType_txt" readonly="true" type="text"/>

</a>

<ul class="child_ul">

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>内部短信</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>公共信息</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>欠税提醒</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>资料催报</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>内部短信</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>公共信息</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>欠税提醒</span>

</li>

<li class="child_li">

<input type="checkbox" class="sms_checkBox"><span>资料催报</span>

</li>

</ul>

</li>

</ul>

</body>

 

  

2.2 js 代码

$(document).ready(function(){

$("#main_a").click(function(event){

event.stopPropagation();

$(".child_ul").slideToggle(200);

});

$(document).click(function(){

$(".child_ul").slideUp(200);

});

$(".child_li").click(function(event){

event.stopPropagation();

if($(this).children("input").attr("checked")) {

$(this).children("input").attr("checked",false);

}else {

$(this).children("input").attr("checked",true);

}

hostCheckBoxValues();

});



function hostCheckBoxValues() {

var span_elms = $(".child_li :checkbox[checked]").next("span");

var size = $(".child_li :checkbox[checked]").next("span").size();

var sms_Str = "";

for(var i = 0; i < size; i++) {

var appendStr = i == (size-1)? span_elms[i].innerHTML : span_elms[i].innerHTML + ",";

sms_Str += appendStr;

}

$("#smsType_txt").val(sms_Str);

}

});



}



/*

获取参数

*/

function getParameters() {

var url=decodeURI(window.location.href);

var pos = url.lastIndexOf("?");

var pars = '';

if(pos>=0){

pars = url.substring(pos+1);

}

var args = pars.split("&");

var result = {};

for(var i=0;i<args.length;i++) {

var arr = args[i].split('=');

if(arr.length==2){result[arr[0]] = arr[1]};

}

return result;

}



/**

*

* @param title

* @param type

* @param timeOut

*/

/

function openAlertWindow(title,type,timeOut) {

if(type == 1) {

$("#alert_img").attr("src","../res/wifi/images/loading.gif");

$("#alert_span").html("正在加载");

}else if(type == 2) {

$("#alert_img").attr("src","../res/wifi/images/gou.png");

$("#alert_span").html("成 功");

}else if(type == 3){

$("#alert_img").attr("src","../res/wifi/images/error.png");

$("#alert_span").html("系统错误");

}

$("#alert_div").fadeIn(500);

if(type == 2 || type == 3) {

setTimeout(function(){

$("#alert_div").fadeOut(500);

},timeOut);

}

}



function closeAlertWindow(timeOut) {

$("#alert_div").hide(500);

}



function loadAlertDivTag() {

$("body").append('<div style="width: 100px;height: 50px;background-color: green">ssss</div>');

}

 

 

 

你可能感兴趣的:(下拉列表)