一个select双击切换效果
无聊写了一个简单的select双击切换效果...
让我把重点讲解下.
changeSelect(true,this.id);changeSelect(false,this.id); //获取当前ID,true or false.
if(opt.selected) //判断是否选中.
elem.removeChild(opt); //删除当前select下的选中option
elem.nextSibling.nextSibling.appendChild(opt); //把当前select下的选中option追加到下一个select下
elem.previousSibling.previousSibling.appendChild(opt); //上一步相反.
好困啊.睡觉.
整体代码:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一个select双击切换效果</title>
</head>
<body>
<select ondblclick="changeSelect(true,this.id);" id="left" multiple="multiple">
<option value="0">left1</option>
<option value="1">left2</option>
<option value="2">left3</option>
</select>
<select ondblclick="changeSelect(false,this.id);" id="right" multiple="multiple">
<option value="0">right1</option>
<option value="1">right2</option>
<option value="2">right3</option>
</select>
<script type="text/javascript">
function changeSelect(b,id){
var $a = document.getElementById(id);
if(b ==true){
var elem=$a;
}else{
var elem=$a;
}
for(var i=0;i<elem.options.length;i++)
{
var opt=elem.options[i];
if(b ==true){
if(opt.selected){
elem.removeChild(opt);
elem.nextSibling.nextSibling.appendChild(opt);
}
}else{
if(opt.selected){
elem.removeChild(opt);
elem.previousSibling.previousSibling.appendChild(opt);
}
}
}
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？