如何在下拉框Select中动态添加option？

当遇到如下需求的时候：

需要同时展示多个不同类型的下拉框的时候；

0510152025     1-年领4-月领5-趸领

解决思路如下：

• 通过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]);
		  }
    }复制代码

转载于:https://juejin.im/post/5cad8d666fb9a0686c01836d