设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › select添加和移除选项
返回列表 发新帖
查看: 3191|回复: 9

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

[复制链接]
狗王
发表于 2020-5-16 15:25:55 | 显示全部楼层 |阅读模式

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

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

x
  1. <form name="myForm" id="myFrom" method="post">
  2.             <select name="location" id="selLocation">
  3.               <option value="Sunnyvale, CA">Sunnyvale1</option>
  4.               <option value="Los Angeles, CA">Los Angeles1</option>
  5.               <option value="Mountain View, CA">Mountain View</option>
  6.               <option value=" ">China</option>
  7.               <option>Australia</option>
  8.             </select>
  9.                 <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
  10.                 <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
  11.          </form>
复制代码

大佬们，该如何操作
最佳答案
月排行榜 / 总排行榜
wp231957
2020-5-17 18:03:43
狗王 发表于 2020-5-17 16:57
大佬能写出来我看看嘛，谢谢了
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>select添加和移除选项</title>
  6.         </head>
  7.         <body>
  8.         <form name="myForm" id="myFrom" method="post">
  9.             
  10.             <!--列表-->
  11.             <select name="location" id="selLocation">
  12.               <option value="Sunnyvale, CA">Sunnyvale1</option>
  13.               <option value="Los Angeles, CA">Los Angeles1</option>
  14.               <option value="Mountain View, CA">Mountain View</option>
  15.               <option value=" ">China</option>
  16.               <option>Australia</option>
  17.             </select>
  18.                
  19.                 <!--按钮-->
  20.                 <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
  21.                 <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
  22.         
  23.         </form>
  24.         <script type="text/javascript">
  25.                
  26.                 //添加select最后一项
  27.                 var AddSelect = function(){
  28.                         var selLocation = document.getElementById('selLocation');
  29.                         var option=document.createElement("option");
  30.                         option.text="Kiwi";
  31.                         selLocation.options[selLocation.options.length] =option;
  32.                 }
  33.                
  34.                 //删除列表第一项
  35.                 var RemoveSelect = function(){
  36.                   
  37.                         var selLocation = document.getElementById('selLocation');
  38.                         if(selLocation.options.length > 0){
  39.                             let index=selLocation.options.length-1;
  40.                             selLocation.remove(index);
  41.                 }
  42.             }
  43.                
  44.         </script>
  45.         </body>
  46. </html>

复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-5-16 16:15:38 | 显示全部楼层
你要操作什么（说清楚一点）
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

狗王
 楼主| 发表于 2020-5-16 16:20:26 | 显示全部楼层
单击添加select最后一项
单击删除select第一项
如何用js做
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

pyrhon萌新#
发表于 2020-5-16 17:16:23 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript">

  9.             var add = function(){
  10.                 var show = document.getElementById("show")
  11.                 var op = new Option(document.getElementById("op").value);
  12.                 show.options[show.options.length] = op;
  13.             }
  14.             var del = function(){
  15.                 var show = document.getElementById("show")
  16.                 if(show.options.length>0){
  17.                     show.remove(show.options.length-1);
  18.                 }
  19.             }
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <input id = "op" type="text" />

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

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


  31.     </body>
  32. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

狗王
 楼主| 发表于 2020-5-16 18:08:06 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>select添加和移除选项</title>
  6.         </head>
  7.         <body>
  8.         <form name="myForm" id="myFrom" method="post">
  9.             
  10.             <!--列表-->
  11.             <select name="location" id="selLocation">
  12.               <option value="Sunnyvale, CA">Sunnyvale1</option>
  13.               <option value="Los Angeles, CA">Los Angeles1</option>
  14.               <option value="Mountain View, CA">Mountain View</option>
  15.               <option value=" ">China</option>
  16.               <option>Australia</option>
  17.             </select>
  18.                
  19.                 <!--按钮-->
  20.                 <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
  21.                 <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
  22.        
  23.         </form>
  24.         <script type="text/javascript">
  25.                
  26.                 //添加select最后一项
  27.                 var AddSelect = function(){
  28.                         var selLocation = document.getElementById('selLocation');
  29.                         var newoption = new Option(document.getElementsByTagName('option')[4].value);
  30.                         selLocation.options[selLocation.options.length] = options;
  31.                 }
  32.                
  33.                 //删除列表第一项
  34.                 var RemoveSelect = function(){
  35.                         var selLocation = document.getElementById('selLocation');
  36.                         if(selLocation.options.length == 1){
  37.                                 selLocation.RemoveSelect(selLocation.options.length-1);
  38.                 }
  39.                
  40.         </script>
  41.         </body>
  42. </html>
复制代码


这段代码怎么改？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
发表于 2020-5-17 14:06:53 | 显示全部楼层
狗王 发表于 2020-5-16 18:08
这段代码怎么改？


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

39行   又是什么鬼，少半个花括号
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

狗王
 楼主| 发表于 2020-5-17 16:57:20 | 显示全部楼层
wp231957 发表于 2020-5-17 14:06
30行     selLocation.options[selLocation.options.length] = options;   什么鬼  没定义

39行    ...

大佬能写出来我看看嘛，谢谢了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
发表于 2020-5-17 18:03:43 | 显示全部楼层    本楼为最佳答案   
狗王 发表于 2020-5-17 16:57
大佬能写出来我看看嘛，谢谢了
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>select添加和移除选项</title>
  6.         </head>
  7.         <body>
  8.         <form name="myForm" id="myFrom" method="post">
  9.             
  10.             <!--列表-->
  11.             <select name="location" id="selLocation">
  12.               <option value="Sunnyvale, CA">Sunnyvale1</option>
  13.               <option value="Los Angeles, CA">Los Angeles1</option>
  14.               <option value="Mountain View, CA">Mountain View</option>
  15.               <option value=" ">China</option>
  16.               <option>Australia</option>
  17.             </select>
  18.                
  19.                 <!--按钮-->
  20.                 <input type="button" value="单击添加select最后一项" onclick="AddSelect()"/>
  21.                 <input type="button" value="单击删除select第一项" onclick="RemoveSelect()"/>
  22.         
  23.         </form>
  24.         <script type="text/javascript">
  25.                
  26.                 //添加select最后一项
  27.                 var AddSelect = function(){
  28.                         var selLocation = document.getElementById('selLocation');
  29.                         var option=document.createElement("option");
  30.                         option.text="Kiwi";
  31.                         selLocation.options[selLocation.options.length] =option;
  32.                 }
  33.                
  34.                 //删除列表第一项
  35.                 var RemoveSelect = function(){
  36.                   
  37.                         var selLocation = document.getElementById('selLocation');
  38.                         if(selLocation.options.length > 0){
  39.                             let index=selLocation.options.length-1;
  40.                             selLocation.remove(index);
  41.                 }
  42.             }
  43.                
  44.         </script>
  45.         </body>
  46. </html>

复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

狗王
 楼主| 发表于 2020-5-17 18:43:24 | 显示全部楼层
wp231957 发表于 2020-5-17 18:03

谢谢大佬
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-18 06:02

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表