[已解决]select添加和移除选项

狗王 · 发表于 2020-5-16 15:25:55

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<form name="myForm" id="myFrom" method="post">
            <select name="location" id="selLocation">
              <option value="Sunnyvale, CA">Sunnyvale1</option>
              <option value="Los Angeles, CA">Los Angeles1</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value=" ">China</option>
              <option>Australia</option> 
            </select>
                <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
                <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
         </form>

大佬们，该如何操作

最佳答案

月排行榜 / 总排行榜

wp231957

2020-5-17 18:03:43

狗王发表于 2020-5-17 16:57
大佬能写出来我看看嘛，谢谢了

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>select添加和移除选项</title>
        </head>
        <body>
        <form name="myForm" id="myFrom" method="post">
            
            <!--列表-->
            <select name="location" id="selLocation">
              <option value="Sunnyvale, CA">Sunnyvale1</option>
              <option value="Los Angeles, CA">Los Angeles1</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value=" ">China</option>
              <option>Australia</option> 
            </select>
                
                <!--按钮-->
                <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
                <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
        
        </form>
        <script type="text/javascript">
                
                //添加select最后一项
                var AddSelect = function(){
                        var selLocation = document.getElementById('selLocation');
                        var option=document.createElement("option");
                        option.text="Kiwi";
                        selLocation.options[selLocation.options.length] =option;
                }
                
                //删除列表第一项
                var RemoveSelect = function(){
                   
                        var selLocation = document.getElementById('selLocation');
                        if(selLocation.options.length > 0){
                            let index=selLocation.options.length-1;
                            selLocation.remove(index);
                }
            }
                
        </script> 
        </body>
</html>

跳转到最佳答案楼层

liuzhengyuan · 发表于 2020-5-16 16:15:38

你要操作什么（说清楚一点）

狗王 · 发表于 2020-5-16 16:20:26

单击添加select最后一项
单击删除select第一项
如何用js做

pyrhon萌新# · 发表于 2020-5-16 17:15:49

[code]<!DOCTYPE html>
<html>

<head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">

         var add = function(){
            var show = document.getElementById("show")
            var op = new Option(document.getElementById("op").value);
            show.options[show.options.length] = op;
         }
         var del = function(){
            var show = document.getElementById("show")
            if(show.options.length>0){
                  show.remove(show.options.length-1);
            }
         }
      </script>
</head>
<body>
      <input id = "op" type="text" />

      <input type="button" value="增加" onclick="add()"/>
      <input type="button" value="删除" onclick="del()"/><br/>

      <select id="show" size="8" style="width: 120px;"></select>

</body>
</html>

pyrhon萌新# · 发表于 2020-5-16 17:16:23

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            var add = function(){
                var show = document.getElementById("show")
                var op = new Option(document.getElementById("op").value);
                show.options[show.options.length] = op;
            }
            var del = function(){
                var show = document.getElementById("show")
                if(show.options.length>0){
                    show.remove(show.options.length-1);
                }
            }
        </script>
    </head>
    <body>
        <input id = "op" type="text" />

        <input type="button" value="增加" onclick="add()"/>
        <input type="button" value="删除" onclick="del()"/><br/>

        <select id="show" size="8" style="width: 120px;"></select>


    </body>
</html>

狗王 · 发表于 2020-5-16 18:08:06

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>select添加和移除选项</title>
        </head>
        <body>
        <form name="myForm" id="myFrom" method="post">
            
            <!--列表-->
            <select name="location" id="selLocation">
              <option value="Sunnyvale, CA">Sunnyvale1</option>
              <option value="Los Angeles, CA">Los Angeles1</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value=" ">China</option>
              <option>Australia</option> 
            </select>
                
                <!--按钮-->
                <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
                <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
        
        </form>
        <script type="text/javascript">
                
                //添加select最后一项
                var AddSelect = function(){
                        var selLocation = document.getElementById('selLocation');
                        var newoption = new Option(document.getElementsByTagName('option')[4].value);
                        selLocation.options[selLocation.options.length] = options;
                }
                
                //删除列表第一项
                var RemoveSelect = function(){
                        var selLocation = document.getElementById('selLocation');
                        if(selLocation.options.length == 1){
                                selLocation.RemoveSelect(selLocation.options.length-1);
                }
                
        </script> 
        </body>
</html>

这段代码怎么改？

wp231957 · 发表于 2020-5-17 14:06:53

狗王发表于 2020-5-16 18:08
这段代码怎么改？

30行 selLocation.options[selLocation.options.length] = options; 什么鬼没定义

39行又是什么鬼，少半个花括号

狗王 · 发表于 2020-5-17 16:57:20

wp231957 发表于 2020-5-17 14:06
30行 selLocation.options[selLocation.options.length] = options; 什么鬼没定义

39行 ...

大佬能写出来我看看嘛，谢谢了

wp231957 · 发表于 2020-5-17 18:03:43

这个最佳答案由 wp231957 给出，感谢 wp231957 的回答。

单击隐藏图章

狗王发表于 2020-5-17 16:57
大佬能写出来我看看嘛，谢谢了

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>select添加和移除选项</title>
        </head>
        <body>
        <form name="myForm" id="myFrom" method="post">
            
            <!--列表-->
            <select name="location" id="selLocation">
              <option value="Sunnyvale, CA">Sunnyvale1</option>
              <option value="Los Angeles, CA">Los Angeles1</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value=" ">China</option>
              <option>Australia</option> 
            </select>
                
                <!--按钮-->
                <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
                <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
        
        </form>
        <script type="text/javascript">
                
                //添加select最后一项
                var AddSelect = function(){
                        var selLocation = document.getElementById('selLocation');
                        var option=document.createElement("option");
                        option.text="Kiwi";
                        selLocation.options[selLocation.options.length] =option;
                }
                
                //删除列表第一项
                var RemoveSelect = function(){
                   
                        var selLocation = document.getElementById('selLocation');
                        if(selLocation.options.length > 0){
                            let index=selLocation.options.length-1;
                            selLocation.remove(index);
                }
            }
                
        </script> 
        </body>
</html>

狗王 · 发表于 2020-5-17 18:43:24

wp231957 发表于 2020-5-17 18:03

谢谢大佬

账号		自动登录	找回密码
密码			立即注册