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

来源：互联网发布：samba源码下载编辑：程序博客网时间：2024/06/06 18:22

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

页面显示效果：

阅读全文

1 0