js怎么实现能多选的下拉框,点一个选中一个,反选取消选择

显示全部楼层 · 2021-1-27 07:01:47

想用js实现以下效果，当然效果是可以多选的，点一个选中一个,反选取消选择。

不知道如何写这个js，最好是操作select,其它也行。麻烦各位高手帮帮忙!
分 -->

千问 · 2021-1-27 07:01:47

不是很明白你的意思
那个下拉框是做什么的啊
点不是指点元素本身吗？

千问 · 2021-1-27 07:01:47

下拉框里面的数据是可以多选的，选中颜色会变，在点这个颜色会变回原来的样子，然后下拉框会显示选中的数据

千问 · 2021-1-27 07:01:47

整个网站好像就服务于这一个功能：
http://loudev.com/
跟你的界面不一样，但是功能应该是一样的。
我在Google上搜的：
http://www.google.com.hk/#newwindow=1&q=multi+select+javascript&safe=strict

千问 · 2021-1-27 07:01:47

我要的不是你说的那种有两个列表框的效果，而是只有弹出一个下拉框，狂里面可以有多个复选框，就是有点像

，但是我要的效果是去掉了复选框，用颜色变化代替了复选框，选中一个变颜色，如果选择多个，则这几个都变颜色。取消的话，只需对被选中的再垫一下就会取消。所以说我要的是这个效果，而不是楼上大哥你说的那种。

千问 · 2021-1-27 07:01:47

可以提供楼主一个思路：
1.添加一个文本框
2.添加一个DIV，内部包含所有的选项（CHECKBOX或其他的控件都可以，布局可以使用DIV或TABLE）
3.文本框加CLICK事件，点击后显示DIV，并对DIV进行定位
关于点击操作：
1.读取文本框值
2.获取点击值
3.文本框值+点击值，更新文本框
4.反过来一样，如果是取消点击，则文本框内相应的值应该被去除
碰巧曾经在一个项目中做过类似的控件

千问 · 2021-1-27 07:01:47

下拉框中的复选框

.c1{
background-Color:#dddddd;
//bgColor:#dddddd;
}
.c0{
background-Color:#ffffff;
//bgColor:#dddddd;
}
body{
margin:0px;
SCROLLBAR-FACE-COLOR:#e0edfd;
SCROLLBAR-HIGHLIGHT-COLOR:#dfe8f4;
SCROLLBAR-SHADOW-COLOR:#2c7cda;
SCROLLBAR-3DLIGHT-COLOR:#2c7cda;
SCROLLBAR-ARROW-COLOR:#14549f;
SCROLLBAR-TRACK-COLOR:#eaf5fd;
SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
SCROLLBAR-BASE-COLOR:#e0edfd;
}
.menu{
display:none;
}
input.blur{
border:1pxsolid#99BBE8;
background:#FFFFFF;
height:18px;
}
.tableborder{
border:solid1px#CCCCCC;
border-collapse:collapse;
font-size:12px;
}

[/td]

你是1 你是4
你是2 你是5
你是3 你是6

(??ω??)希望对你有所帮助

千问 · 2021-1-27 07:01:47

代码可以用，不过虽然实现了，但是效果很差，而且也不是我想要的ulli布局。不过还是非常感谢sinbas这位大哥。

千问 · 2021-1-27 07:01:47

改成ul应该不难，然后把checkbox隐藏掉就差不多了把

千问 · 2021-1-27 07:01:47

感谢各位大大的帮助，已经解决了。最终的多选下拉框效果：