js下拉列表实现增加和移除选项
<!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>页面显示效果：本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
