Select 級聯操做[原生JavaScript+Jquery]

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 級聯操做: