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