form表單select聯動（轉）

下拉列表：二級聯動菜單javascript

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.htmlhtml