向<select>元素中动态添加option-CSDN博客

向<select>元素中动态添加option JavaScript代码：

/**
 * select元素动态添加option
 * 
 * @param selectEleId select元素id
 * @param width 要添加的option的value属性值
 * @param height 要添加的option的innerHTML
 * @param selected 是否选中
 */
function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
  var selectEle = document.getElementById(selectEleId);
  var optionObj = document.createElement("option");
  optionObj.value = optionValue;
  optionObj.innerHTML = optionInnerHTML;
  optionObj.selected = selected;
  selectEle.appendChild(optionObj);
}

示例完整代码：

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>向select元素中动态添加option</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
  var now = new Date();
  var year = now.getFullYear();
  addOption("years", year, year, true);
  addOption("years", year + 1, year + 1, false);
  
  var innerHTMLs = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
  var month = now.getMonth();
  for(var i = month; i < 12; i++) {
    if(i == month) {
	  addOption("months", i, innerHTMLs[i], true);
	} else {
	  addOption("months", i, innerHTMLs[i], false);
	}
  }
});
/**
 * select元素动态添加option
 * 
 * @param selectEleId select元素id
 * @param width 要添加的option的value属性值
 * @param height 要添加的option的innerHTML
 * @param selected 是否选中
 */
function addOption(selectEleId, optionValue, optionInnerHTML, selected) {
  var selectEle = document.getElementById(selectEleId);
  var optionObj = document.createElement("option");
  optionObj.value = optionValue;
  optionObj.innerHTML = optionInnerHTML;
  optionObj.selected = selected;
  selectEle.appendChild(optionObj);
}
</script>
</head>
<body>
年份：<select id="years"></select>
<br/>
月份：<select id="months"></select>
</body>
</html>