在使用上次写的一个多先下拉框时，我发现了很多问题，经过修改和完善后，现在已经能够很好地使用了，且可移植性也比较好，下面是源代码。
js
复制代码 代码如下:
(function(){
$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).val("---请选择---");
$(this).next().empty(); //先清空
$(this).unbind("click");
$(this).click(function(e){
jq_check = $(this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = jq_check.next();
jq_checks_select.addClass("checks_div_select");
//jq_checks_select = $("").insertAfter(jq_check);
$.each(options, function(i, n){
check_div=$("
" + n + "
").appendTo(jq_checks_select); check_box=check_div.children();
check_box.click(function(e){
//jq_check.attr("value",$(this).attr("value") );
temp="";
$(this).parents().find("input:checked").each(function(i){
if(i==0){
temp=$(this).val();
}else{
temp+=","+$(this).val();
}
});
//alert(temp);
jq_check.val(temp);
e.stopPropagation();
});
});
jq_checks_select.show();
}else{
jq_checks_select.toggle();
}
e.stopPropagation();
});
$(document).click(function () {
flag=$("#test_div");
if(flag.val()==""){
flag.val("---请选择---");
}
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("visibility","hidden");
//alert();
//});
}
})
})(jQuery);
html
复制代码 代码如下:
<script type="text/javascript" src="js/jquery.js"> <br></script>
<script type="text/javascript" src="js/jquery_mutili.js"> <br></script>
<script language="javascript"> <br>$(document).ready(function(){ <br>var options = { <br>1: "第一个选择项", <br>2: "第二个选择项", <br>3: "第三个选择项", <br>4: "第四个选择项", <br>5: "第五个选择项", <br>6: "第六个选择项" <br>}; <br>$("#test_div").checks_select(options); <br>}); <br></script>
