HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）

朴灿烈づ我的快乐病毒、 2022-10-06 12:49 588阅读 0赞

概述

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

\}

效果

![6c1555302777729326ca3efa0910d9ec.png][]

[6c1555302777729326ca3efa0910d9ec.png]: /images/20221005/27e4670e9700475780a6c52bc97fa80d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，588人围观）

还没有评论，来说两句吧...

相关阅读

相关下拉复选框

最近在项目开发中，有的地方用到了下拉复选框，于是再网上找了一下，有很多种写法，但自己感觉不是很好，又不想用插件，因为感觉引入的js太大，功能太繁杂，于是决定自己写一个小demo

落日映苍穹つ/ 2023年06月05日 12:58/ 0 赞/ 173 阅读

相关 HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）

概述项目中要用到可多选的下拉框(select)，发现HTML中无此控件，故手动模拟实现一下。模拟所用元素：input，ul，li 代码模拟实现带复选框的下拉列表

朴灿烈づ我的快乐病毒、/ 2022年10月06日 12:49/ 0 赞/ 589 阅读

相关单选框，复选框，下拉列表的美化

参考：[http://www.jq22.com/yanshi9351][http_www.jq22.com_yanshi9351] ![这里写图片描述][20160911

野性酷女/ 2022年09月25日 14:21/ 0 赞/ 310 阅读

相关 jquery复选框全选获取下拉框的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

女爷i/ 2022年09月20日 16:18/ 0 赞/ 310 阅读

相关单选按钮、下拉框、复选框选中问题

我们直接看例子吧： <input type="radio" name="radio" value="$\{var.id \}" checked="checked"/>$\{v

爱被打了一巴掌/ 2022年09月20日 11:13/ 0 赞/ 310 阅读

相关 HTML下拉框多选

HTML下拉框多选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

谁践踏了优雅/ 2022年08月20日 12:09/ 0 赞/ 747 阅读

相关 jquery获取单选框复选框下拉框值

jquery获取单选框（radio）复选框（checkbox）下拉框（select）的值，亲测可用。有什么疑问可以留言效果图： ![20160218153630060][

男娘i/ 2022年08月20日 08:28/ 0 赞/ 402 阅读

相关给下拉框和复选框赋值

$("input\[name=gender\]").val(\[employee.gender\]); // employee 为对象

阳光穿透心脏的1/2处/ 2022年05月31日 13:57/ 0 赞/ 306 阅读

相关 PyQt实现下拉式复选框

PyQt实现下拉式复选框在PyQt5下实现下拉复选框QComboCheckBox 实现方法如下： from PyQt5 import QtCore, QtG

桃扇骨/ 2022年05月17日 13:17/ 0 赞/ 1201 阅读

相关复选下拉框组件

说明需求做报表的时候，筛选条件中需要用到复选下拉框，首先说明： 1. 复选框（复选框）无法满足我的需求，因为可选项有上百个，不可能都直接列在页面上 2. 下拉框（选

柔情只为你懂/ 2022年05月15日 14:06/ 0 赞/ 401 阅读