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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转载: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" 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下拉列表实现增加和移除选项的主要内容,如果未能解决你的问题,请参考以下文章

js中input文本框设置和移除默认值

如何通过js实现添加事件监听和移除事件监听

表单中单选框添加选项和移除选项

如何使用validate.js进行动态添加和移除表单验证信息

JQuery应用:实现下拉列表选择一项,然后在第二个下拉列表显示全部。谢谢了 请一定帮我做一下!200分!

selenium python 针对js生成的下拉列表,如何选择隐藏的选项