码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-01 21:29:24      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:nal   oca   新建   func   doc   div   size   href   option   

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

原文地址:http://blog.csdn.net/qq_31708763/article/details/77736671

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

标签:nal   oca   新建   func   doc   div   size   href   option   

原文地址:http://www.cnblogs.com/JaneYork/p/7464964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!