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

select添加和移除选项

<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>
大佬们，该如何操作

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

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

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

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

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

<!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 = 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 = 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').value);
                        selLocation.options = 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 = options;   什么鬼没定义

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

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

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

39行    ...

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

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


谢谢大佬
页: [1]
查看完整版本: select添加和移除选项