概述
项目中要用到可多选的下拉框(select)，发现HTML中无此控件，故手动模拟实现一下。
模拟所用元素：input，ul，li
代码
模拟实现带复选框的下拉列表body{
margin: 20px;
}
input{
width: 150px;
height: 30px;
}
ul{
display: none;
list-style: none;
width: 150px;
padding: 0;
margin: 0;
}
li{
height: 20px;
font-size: 20px;
margin-bottom: 5px;
}
input{
font-size: 14px;
}
input[type="checkbox"]{
width: 20px;
height: 20px;
line-height: 20px;
margin: 5px 5px 0 0;
vertical-align: top;
}
#id_div{
width: 150px;
}
- 000000
- 111111
- 222222
- 333333
- 444444
//显示 - 隐藏下拉列表
$("#id_div").mouseleave( function(){
$("#id_select_options").hide();
} );
function show_options()
{
if( $("#id_select_options").is(":hidden") )
$("#id_select_options").show();
else
$("#id_select_options").hide();
}
//复选框勾选，更新显示
function chk_changed()
{
var str_selected = "";
var lstChk = document.getElementsByName( "select_checkbox" );
for( var n = 0; n < lstChk.length; n++ )
{
if( lstChk[n].checked )
str_selected = str_selected + "/" + lstChk[n].value;
}
$("#id_select").val( str_selected.substring( 1, str_selected.length ) );
}
效果
