js下拉列表实现增加和移除选项

2023-10-11 13:49:55 浏览数 (1)

代码语言:javascript复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

代码语言:javascript复制
<html>
  <head>
    <base href="http://localhost:8080/级联/">
    
    <title>JaneYork</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
代码语言:javascript复制
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  <select id="s1" multiple="multiple">
  	<option>北京</option>
  	<option>上海</option>
  </select>
  <input type="text" id="txt">
  <input type="button" value="添加" id="addbtn" οnclick="add()">
  <input type="button" value="移除" id="removebtn" οnclick="remove()">
  </body>
代码语言:javascript复制
//主要功能实现
  <script>
  //添加按钮功能实现
  	function add(){
  	//获取input文本输入狂标签
  		var txt = document.getElementById("txt");
  		//新建一个option
  		var o = new Option();
  		//将文本框输入的内容赋给option显示的内容
  		o.text = txt.value;
  		var se = document.getElementById("s1");
  		//把新建的option添加进来
  		se.add(o);
  	}
  	//移除按钮功能实现
  	function remove(){
  	  	//获取select标签
  		var se = document.getElementById("s1");
  		//移除当前选中项
  		se.remove(se.selectedIndex);
  	}
  </script>
</html>
代码语言:javascript复制
页面显示效果:

0 人点赞