option中添加新的值

125 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select中添加信息</title>
	</head>
	<body>
		<select id="se">
			<option value ="hebei">河北省</option>
			<option value ="shandong">山东省</option>
			<option value ="hubei">湖北省</option>
			<option value ="henan">河南省</option>
		</select><br>
		请输入要添加的值:<input type="text" id="add"/>
		<input type="button" id="addButton" value="添加"/>
		<div id="view">		</div> //用来显示选中选项的索引值
		
		<script type="text/javascript">
			var s1 = document.getElementById("se");
			var view1 = document.getElementById("view");
			// 设置选项是否可以多选
			s1.multiple = false;
			//显示选中选项的索引值
			s1.onchange = function(){
				//获取选中选项的索引号
				var index = s1.selectedIndex;
				view1.innerHTML = "选中选项的索引为:"+index+"<br/>";
			}
			//获取添加按钮
			var addButton = document.getElementById("addButton");
			//绑定点击添加按钮时触发的点击事件
			addButton.onclick = function(){
				//获取add按钮元素
				var add = document.getElementById("add");
				//创建一个选项对象
				var newOption = new Option();
				//add.value是真正去获取input元素中的内容
				//newOption.text是获取新选项的选项值
				newOption.text = add.value;
				se.add(newOption);
			}
		</script>
	</body>
</html>