动态移除下拉框的选项

chen505586338 2013-03-15 06:15:26
请问，有几个下拉框。前面选中之后，后面的下拉框里则移除或隐藏前面已经选中的选修，
比如下拉框里值是【1，2，3，4，5】，第一个选了1，后面就只剩下【2.3.4.5】，在后面只剩【3.4.5】，跪求帮助啊。
...全文
658 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
scscms太阳光 2013-03-18
  • 打赏
  • 举报
 回复 
<div id="list">生成下拉菜单地方</div>
<script type="text/javascript">
    var arr=[1,2,3,4,5];//下拉菜单值
    var txt=["菜单1","菜单2","菜单3","菜单4","菜单5"];//下拉菜单文本
    var num=2;//生成几级下拉菜单(从0算起,但不可超出数组下标)
    var i_all=num>arr.length-1?arr.length-1:num;//判断是否超出数组下标
    var str="";
    for(var i=0;i<=i_all;i++){
        if(i<i_all){
            str+='<select name="cat'+i+'" onchange="option('+i+')" id="cat'+i+'">';
        }else{
            str+='<select name="cat'+i+'" id="cat'+i+'">';
        }
        if(i==0){
            for(var n=0;n<arr.length;n++){
                str+='<option value="'+arr[n]+'">'+txt[n]+'</option>';
            }
        }
        str+='</select>';
    }
    document.getElementById("list").innerHTML=str;
    function option(i){
        if(i>=i_all)return;
        var obj=document.getElementById("cat"+i);
        var opt=obj.options;
        var thi=document.getElementById("cat"+(i+1));
        thi.innerHTML="";
        for(var n=0;n<opt.length;n++){
            if(n!=obj.selectedIndex){
                str = new Option(opt[n].text,opt[n].value);
                thi.options.add(str);
            }
        }
        if(i+1<i_all)option(i+1);
    }
    option(0);
</script>
chen505586338 2013-03-18
  • 打赏
  • 举报
 回复
引用 8 楼 chen505586338 的回复:
引用 7 楼 yenange 的回复:JavaScript code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ……
引用 7 楼 yenange 的回复:
JavaScript code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>123</title>……
您的效果是第一个选了1，第二个1没了。第一个重新选了2，第二个1和2都没了。能不能第一个选了2第二个1再出来呀！
chen505586338 2013-03-18
  • 打赏
  • 举报
 回复
引用 7 楼 yenange 的回复:
JavaScript code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>123</title>……
哥哥。麻烦写个注释呗。
Kilin_Zhang 2013-03-18
  • 打赏
  • 举报
 回复 

<div id="container">
		<select></select>
		<select></select>
		<select></select>
	</div>
	<script type="text/javascript">
	    var map = {1:1,2:2,3:3,4:4,5:5};
	    var selectList = document.getElementById("container").getElementsByTagName("select");
	    var select,option;
	    for(var i=0;i<selectList.length;i++){
	         select = selectList[i];
		 option = createOption("0","--全部--");
		 select.appendChild(option);
	         for(var j in map){
		     option = createOption(j,map[j]);
		     select.appendChild(option);
		 }
		 //最后一个select不需要change的联动效果
		 if(i<selectList.length - 1){
		     select.onchange = change;
		 }
	    }
	    function createOption(value,text){
		var opt = document.createElement("option"); 
		opt.value = value;
		opt.text = text;
		return opt;
	    }
	    function change(){
		var m={},i=0,selectedValues=[],tmp={},value;
		for(;i<selectList.length;i++){
		    select = selectList[i];
		    m[select.value] = select.value;
		    if(select == this){
			break;
		    }
		}
		for(var v in map){
		    if(m[v] === undefined){
			tmp[v] = map[v];
		    }
		}
		for(var j=i+1;j<selectList.length;j++){
		    select = selectList[j];
		    value = select.value;
		    select.options.length = 1;
		    for(var v in tmp){
			option = createOption(v,tmp[v]);
			select.appendChild(option);
		    }
		    if(tmp[value]){
		        select.value = value;
		    }
		    if(map[value] !== undefined){
		    	tmp[value] = map[value];
		    }
		}
		
	    }
	</script>
吉普赛的歌 2013-03-18
  • 打赏
  • 举报
 回复
引用 9 楼 chen505586338 的回复:
引用 8 楼 chen505586338 的回复:引用 7 楼 yenange 的回复:JavaScript code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<html xmlns="http://www.w3.org/1999/xhtml"……
别急，　这个代码就是百分百完美的了，　保证你好用！！ 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>123</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">
        //--------  注：本代码功能易于扩展，无论再增加任意多的select,只要设置父id (parentId) 即可 --------
        //页面加载完毕
        $(function () {
            //将div容器内的所有 select 设置 change 事件
            $("#divContainer select").change(function () {
                //设置下一级的变化情况
                recursionSetSubSelect(this.id)
            }).each(function () {
                //将每一个select 的原有html保存
                $(this).data("selfHtml", $(this).html());
            });
            //递归设置子一级select
            function recursionSetSubSelect(selectId) {
                //找到下一级的select (B)
                var $subSelect = $("select[parentId='" + selectId + "']");
                //如果无下一级，不作任何操作
                if ($subSelect.length == 0) {
                    return;
                }
                //找到 B 对应所有父级选中项，放在数组
                var valArr = [];
                findAllParentValues($subSelect.attr("parentId"), valArr);
                //清空 B 的所有option
                $subSelect.empty();
                //在原数据(html)中遍历每一个option, 并与数组对比。
                var $selfHtml = $($subSelect.data("selfHtml"));
                $selfHtml.filter("option").each(function () {
                    //如果父级没有用过的（不在数组中），则添加到 B
                    var isUsed = $.inArray($(this).val(), valArr) != -1;
                    if (!isUsed) {
                        $subSelect.append($(this));
                    }
                });
                //递归设置下一级的select 
                recursionSetSubSelect($subSelect.attr("id"));
            }
            //递归查找select所有父级选中项的数组
            function findAllParentValues(selectId, valArr) {
                //找到父级对象 A
                var $parentSelect = $("#" + selectId);
                //如无父级，不作任何操作, 返回数组即可
                if ($parentSelect.length == 0) {
                    return valArr;
                }
                //将A的选中项放在数组中
                valArr.push($parentSelect.val());
                return findAllParentValues($parentSelect.attr("parentId"), valArr);
            }
        });
    </script>
</head>
<body>
<div id="divContainer" >
    <select id="select_1">   
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_2" parentId="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_3" parentId="select_2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>
</body>
</html>
吉普赛的歌 2013-03-15
  • 打赏
  • 举报
 回复 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>123</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">
        $(function () {
            $("#divContainer select").change(function () {
                recursionRemove(this.id, this.value)
            });

            function recursionRemove(selectId, value) {
                var $subSelect = $("select[parentId='" + selectId + "']");
                if ($subSelect.length == 0) {
                    return;
                }
                $subSelect.find("option[value='" + value + "']").remove();
                recursionRemove($subSelect.attr("id"), value);
            }
        });
    </script>
</head>
<body>
<div id="divContainer" >
    <select id="select_1">   
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_2" parentId="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_3" parentId="select_2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>
</body>
</html>
上海程序员3 2013-03-15
  • 打赏
  • 举报
 回复
用innerHTML把select重写更快
bbjbepzz 2013-03-15
  • 打赏
  • 举报
 回复 

<script type="text/javascript">
function fn(index){
    var val = document.getElementById('select_' + index).value;
    var _options;
    for(var i = index+1 ; i < 4 ; ++i){
        _options = document.getElementById('select_' + i).options;        
        for(var j = _options.length-1 ; j >=0 ; --j){
            if(_options[j].value==val || ( i == 3 && document.getElementById('select_1').value == _options[j].value )){
                _options[j].style.display = 'none';                
            }else{
                _options[j].style.display = 'block';
                document.getElementById('select_'+i).value = _options[j].value;
            }
        }
    }
}
</script>
<select id="select_1" onchange="fn(1)">    
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select id="select_2" onchange="fn(2)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select id="select_3" onchange="fn(3)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
chen505586338 2013-03-15
  • 打赏
  • 举报
 回复
引用 1 楼 zzgzzg00 的回复:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-……
哥哥。能不能选完1，1就在第一个框里，第二个，第3以后框里没有1，类推。
chen505586338 2013-03-15
  • 打赏
  • 举报
 回复
引用 2 楼 bbjbepzz 的回复:
JavaScript code?12345678910111213141516171819202122232425262728293031323334353637<script type="text/javascript">function fn(index){ var val = document.getElementById('select_' + index)……
您的这个跑不起来吧。
bbjbepzz 2013-03-15
  • 打赏
  • 举报
 回复 


<script type="text/javascript">
function fn(index){
	var val = document.getElementById('select_' + index).value;
	var _options;
	for(var i = index+1 ; i < 4 ; ++i){
		_options = document.getElementById('select_' + i).options;		
		for(var j = 0 ; j < _options.length ; ++j){
			if(_options[j].value==val || ( i == 3 && document.getElementById('select_1').value == _options[j].value )){
				_options[j].style.display = 'none';
			}else{
				_options[j].style.display = 'block';
			}
		}
	}
}
</script>
<select id="select_1" onchange="fn(1)">	
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>
<select id="select_2" onchange="fn(2)">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>
<select id="select_3" onchange="fn(3)">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>
似梦飞花 2013-03-15
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> var t=[]; function removes(srcdom,id){ var i=srcdom[srcdom.selectedIndex].innerHTML; if(i!='请选择'){ t.push(i); var se=document.getElementById(id); for(var j=0;j<se.length;j++){ if(id=="test3"){ alert("a"); for(var k=0;k<t.length;k++){ if(se[j].innerHTML==t[k]){ se.removeChild(se[j]); } } }else{ if(se[j].innerHTML==i){ se.removeChild(se[j]); } } } } } </script> </head> <body> <select id="test1" onchange="removes(this,'test2')"> <option>请选择</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select id="test2" onchange="removes(this,'test3')"> <option>请选择</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select id="test3"> <option>请选择</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </body> </html> 这样？？
JS操作select下拉框动态变动(创建/删除/获取)
动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等，感兴趣的朋友可以参考下哈
readmine助手-crx插件
语言:中文 (简体) readmine助手可以帮助您改善readmine的使用体验。比如将默认的下拉框改为可以搜索、设置完任务单状态后自动跟踪该任务等。readmine助手可以帮助您改善readmine的使用体验。比如将默认的下拉框改为可以搜索、设置完任务单状态后自动跟踪该任务、可以随时知道当前任务数量等等。更新日志：v1.1.81.问题单列表页面增加生成图表功能v1.1.71.修复编辑工时页面没有设置注释必填v1.1.61.日期选择器下拉框还原为默认2.发布单页面填入工时后，检测工时注释是否必填v1.1.51.增加工时注释必填选项v1.1.41.修复下拉中没有显示新增后的内容问题2.修复下拉没有展示多选问题3.移除自定义美化下拉，改为全局美化4.增加图标徽章，展示任务数量v1.1.31.新增指派给作者选项2.修复不能搜索问题v1.1.21.新增自动完成选项
KeePass Password Safe 2.28密码管理器中文版.rar
软件介绍: KeePass Password Safe是一款功能强大的专业密码管理器，强大的加密算法能够保证你的密码绝对安全。你可以创建管理密码，指定管理密匙，用于加密数据库。管理密匙包含下面密匙源中的一个或多个。您指定的所有源都是打开数据库必须的。如果丢失了一个源，您将无法打开数据库。密钥文件/提供程序，创建一个新的密匙文件或浏览找到已有的文件。如果安装了密匙提供插件，也可以在下拉框中找到。可以使用Windows 用户账号，该源使用当前Windows 用户的账号数据。在Windows账号密码改变时，该数据不改变。如果 Windows 账号丢失，即使用相同用户名和密码也不能创建一个相同的账号。因此需要备份完整的用户数据。创建和恢复这样一个备份不是一项简单任务。如果您不清楚如何去做，请不要启用该选项。密码转换：密匙被加密数次来形成最终的数据库密匙密码转换 ，这增加了时间因素来有效对抗猜解和词典类破解。 数字越大密码转换，使用字典破解越困难，但也将使载入和保存数据库的时间加长。使用回收站：如果启用此选项，KeePass 在删除记录/群组时将它们移到回收站。而从回收站里删除记录/群组将永久的移除它们。
按键精灵教程
大鸟飞过！！-- 新增 导入资源库资源时会有进度条显示 |-- 解决 调试状态下按启动热键会导致其他的脚本被运行问题 |-- 解决 更改热键为鼠标热键后，进入调试状态不能显示问题 |-- 解决 自动补全功能换行后末尾会多加空格问题 |-- 解决 软件最大化后，点击标题栏位置无法激活最前面问题 |-- 解决 取消修改脚本时提示使用自动备份的脚本后为空文档问题 |-- 解决 释放附件文件时，无法取消覆盖问题 \ 界面 |-- 新增 Form窗体背景颜色设置 |-- 解决 Form窗体默认大小会被改变问题 |-- 解决 下拉框控件不能使用等宽高对齐问题 |-- 解决 设置字体后无法撤销问题 |-- 解决 标签控件设为透明属性后修改标题刷新不正常问题 |-- 解决 删除选项卡控件上所有控件，撤消后显示不正常问题 |-- 优化 设计阶段移动控件数量过多时速度缓慢问题 |-- 调整 控件的风格改为XP样式，大幅提升编辑速度 |-- 调整 移除组合框控件背景颜色设置
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。 实现效果： el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。 解决思路（从el-select 的角度来考虑，其他组件组合的情况暂不考虑） 想要实现某些选项是不删除，1、需要tag 不可删除，2、options 不可选择 options 不可选择很好实现，只需要给一个disabled属性。tag 不可删除才是关键。下面是我几种解决思路。 1、 watch 进行监听，当操作不可删除的选项时，el-select 绑定的值
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章