您的位置：首页 > Web前端 > JavaScript

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

2017-08-31 09:46 471 查看

<!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" onclick="add()">
<input type="button" value="移除" id="removebtn" onclick="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>

页面显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： select 下拉列表 JavaScript js

相关文章推荐

新的分享

章节导航