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

最新推荐文章于 2023-10-07 15:03:47 发布

JaneYork

最新推荐文章于 2023-10-07 15:03:47 发布

阅读量8k

点赞数 2

分类专栏： JSP 文章标签： select 下拉列表 JavaScript js

本文链接：https://blog.csdn.net/qq_31708763/article/details/77736671

版权

JSP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <base href="http://localhost:8080/%E7%BA%A7%E8%81%94/">
    
    <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">

	<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>

//主要功能实现
  <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>