html 复选框 mysql_Html:实现带复选框的下拉框(一)

概述

项目中要用到可多选的下拉框(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 ) );

}

效果

083c7b1eef873cae5e1f392625b89725.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值