删除下拉列表

最新推荐文章于 2021-03-05 11:12:13 发布

不善表演

最新推荐文章于 2021-03-05 11:12:13 发布

阅读量5.8k

点赞数

分类专栏： JavaScript技术

JavaScript技术专栏收录该内容

35 篇文章 1 订阅

订阅专栏

对应SELECT元素，应用的是remove()方法来删除其中的选项

remove(long index)
index：表示要删除的选项的索引值，若该索引值比下拉列表中的选项的最大值还大或者小于0，那该方法不会删除任何选项

在这里插入图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>删除下拉列表的选项 </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">
	-->
	<style type="text/css">
		table{
			font-size: 14px;
		}
	</style>
	
	<script type="text/javascript">
		function loadSelectOption(){
			var selectObj = document.getElementById("show");
			var str = ["吉林","辽宁","黑龙江","北京","上海"];
			for(var i=0;i<5;i++){
				var op = document.createElement("option");
				op.innerHTML=str[i];
				selectObj.appendChild(op);
			}
			
		}
		
		function del(){
			var selectObj = document.getElementById("show");
			selectObj.remove(selectObj.length-1);
		}
		
		function add(){
			var selectObj = document.getElementById("show");
			var op = document.createElement("option");
			op.innerHTML = document.getElementById("opValue").value;
			selectObj.appendChild(op);
		}
	</script>
  </head>
  
  <body "loadSelectOption()">
    <table background="bg.bmp" width="270" height="200">
    	<tr>
    		<td align="center">【删除下拉列表的选项】 </td>
    	</tr>
    	<tr>
    		<td id="test" align="center">
    			<input type="text" id="opValue" /> 
    			<input type="button" value="增加" "add()" />
    			<input type="button" value="删除" "del()" />
    		</td>
    	</tr>
    	<tr>
    		<td id="test">
    		
    			 <select id="show" size="8" style="width:120px">
    			 
    			 </select>
    		</td>
    	</tr>
    </table>
  </body>
</html>