Select 级联操作[原生JavaScript+Jquery]
Select 级联操作[原生JavaScript+Jquery]
残风vs逝梦 发表于3年前
Select 级联操作[原生JavaScript+Jquery]
  • 发表于 3年前
  • 阅读 816
  • 收藏 7
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: select级联操作

Select 级联操作:

原生Javascript 的select 级联操作:

    HTML:

<select name="biboId" id="biboId" onchange="getSmbo(this);" style="margin-left:10px;">
	<option value="-1">--请选择大版块--</option>
        <option value="0">--java--</option>
	<option value="1">--数据库--</option>
	<option value="2">--技术前沿--</option>
</select>
<select id="smboId" name="smboId">
	<option value="-1">--请选择小版块--</option>
</select>


原生的JavaScript:

    function getSmbo(SelObj){
    		var val=SelObj.value;
    		if(val!=-1){
    			var smboObj=document.getElementById("smboId");
    			/*上来清空小版块的选项*/
    			for(var i=smboObj.options.length;i>=0;i--){
    				smboObj.remove(i);
    			}
    			/*添加一个待选项*/
    			smboObj.options.add(new Option("--请选择小版块--","-1"));
    			if(val==0){
    				smboObj.options.add(new Option("--java基础--","0"));
    				smboObj.options.add(new Option("--java面向对象--","1"));
					smboObj.options.add(new Option("--java核心API--","2"));
					smboObj.options.add(new Option("--javaEE--","3"));
    			}else if(val==1){
    					smboObj.options.add(new Option("--SQL基础--","0"));
					smboObj.options.add(new Option("--Oracle--","1"));
					smboObj.options.add(new Option("--MySQL--","2"));
    			}
    		}
    }

  注意,这儿有个简单的方法,清除select中得选项:

selObj.options.length=0; //可以替代以上的
/*上来清空小版块的选项*/
    			for(var i=smboObj.options.length;i>=0;i--){
    				smboObj.remove(i);
    			}


jquery的select 级联操作:


共有 人打赏支持
粉丝 44
博文 116
码字总数 71921
×
残风vs逝梦
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: