form表單select聯動(轉)


下拉列表:二級聯動菜單

Select對象的常用屬性
options[]:返回所有option組成的一個數組;
name:名稱
value:option的value的值
length:設置或讀取option的個數
selectedIndex:當前選中的option的索引號
option對象的常用屬性
text:指<option></option>中的文本
value:指option對象的value屬性
index:指每個option對象的索引號
selected:當前option是否選中

代碼部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>form表單之select操作</title>
        <script type="text/javascript">
            var arr_da = ["請選擇大類目","1","2","3","4","5","6","7"];
            var arr_xiao = [
                        ["請選擇小類目"],
                        ['101','102','103','104','105','106','107','108'],
                        ['201','202','203','204','205','206','207','208'],
                        ['301','302','303','304','305','306','307','308'],
                        ['401','402','403','404','405','406','407','408'],
                        ['501','502','503','504','505','506','507','508'],
                        ['601','602','603','604','605','606','607','608'],
                        ['701']
            ];
 
onload = function() {
    var oForm = document.getElementById('form1');
    var oda_da = document.getElementById('da');
     var oxiao_xiao = document.getElementById('xiao');
/*     
    var oda_da = oForm.children[2];
    var oyyxm_yyxm = oForm.children[3];
*/
 
 
    // 添加點擊 onchange 事件
    oda_da.onchange = function() {
        var _this = this.selectedIndex;
        // 默認進來高度清零
        oxiao_xiao.length = 0;
        // 指定下拉的高度
        initxianz(_this);
    };
 
    // 初始化下拉列表
    init();
    // init select
    function init(){
        var index = 0;
        // 指定下拉的高度
        oda_da.length = arr_da.length;
 
        // 循環數組, 把內容寫到下拉列表中去
        for( var i = 0; i < arr_da.length; i++ ){
            oda_da.options[i].text = arr_da[i];
            oda_da.options[i].value = arr_da[i];
        }
 
        // 指定默認索引號
        oda_da.selectedIndex = index;
        // 指定下拉的高度
        initxianz(index);
    }
 
    //下拉內容高度
    function initxianz(index){
        // 指定下拉的高度
        oxiao_xiao.length = arr_xiao[index].length;
 
        // 循環數組, 把內容寫到下拉列表中去
        for( var i = 0; i < arr_xiao[index].length; i++ ){
            oxiao_xiao.options[i].text = arr_xiao[index][i];
            oxiao_xiao.options[i].value = arr_xiao[index][i];
        }
    }
 
};
 
 
</script>
</head>
 
<body>


<form id="form1" onSubmit="return xxg();">

    大分類: <select name="da"  id="da" style="width:130px;"></select>
 
    小分類: <select name="xiao" id="xiao" style="width:130px;"></select>
   
   <input type="submit" id="submit" class="nr_submit" value="提交預約"  />
   
</form>

<!--彈出測試-->
<script>
function xxg(){

    var da = form1.da.value;
    
    var xiao = form1.xiao.value;

}
</script>

<!--彈出測試結束-->




</body>
</html>

轉載於:https://www.cnblogs.com/liyuspace/p/8657231.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM