向
程序员文章站
2022-07-08 09:26:51
...
向<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>
下一篇： 海外开发者账号上架总结