如何在下拉框Select中動態新增option？

當遇到如下需求的時候：

需要同時展示多個不同型別的下拉框的時候；

解決思路如下：

• 通過Javascript 程式碼，根據後臺傳遞的資料動態顯示select 下拉框；

• 解決思路：通過原生方式或者其他方式比如Jquery獲取Dom 陣列；

  document.getElementsByName('selectName');//or getElementsByClassName('selectClassName');

• example: 後臺獲取到的動態陣列如下； var yearLimit=[0,5,10,15,20,25]; var withDrawWay=['1-年領','4-月領','5-躉領'];

• 呼叫執行以下JS 程式碼；

  /**
		 *  select動態新增option;
		 *  params: domObj為select Dom元素物件陣列；
		 *          example: nodeList[];
		 *          arrData 為向每一個select Dom 元素中需要新增的陣列；
		 *          example:[0,5,10,15,20,25]；
		 * */
        function dynamicOption(arrData,domObj){
            console.log(arrData);
            console.log(domObj);
            for(var j=0;j<domObj.length;j++){
                for(var i=0;i<arrData.length;i++){
                    var option=document.createElement('option');
                    option.value=arrData[i];
                    option.innerText=arrData[i];
                    console.log( option, domObj[j]);
                    domObj[j].append(option);

                }
            }
		}
複製程式碼

	/**
	 *  多型別Select 多型別options時:
	 *  選擇使用for迴圈呼叫動態新增函式dynamicOption
	 * params:selectList：需要動態新增的select Dom 陣列；
	 * params:arrList：需要動態新增的options 陣列；
	 * arrList[i] selectList[i]; 下標一一對應；
	 *
	 * */
    function initSelectInfo(arrList,selectList){

          for(var i=0;i<selectList.length;i++){
              dynamicOption(arrList[i],selectList[i]);
		  }
    }複製程式碼