添加删除select中的option元素

最新推荐文章于 2024-07-29 03:35:59 发布
原创 最新推荐文章于 2024-07-29 03:35:59 发布 · 292 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#os #function #javascript #html #文档

本文介绍了一个简单的HTML页面示例，该示例使用JavaScript实现两个下拉选择框之间的选项转移功能。当用户双击其中一个选择框的选项时，该选项会移动到另一个选择框中，反之亦然。此功能通过JavaScript中的`getElementById`方法和`options`属性来实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript" >

function moveOpR(){
    
     var os=document.getElementById("s");
    var os2=document.getElementById("s2");
     if(os.options.length>=1){
        var txt=os.options[os.options.selectedIndex].text;
        var val=os.options[os.options.selectedIndex].value;
        var op=new Option(txt,val,true,true);
        os2.options.add(op);
        os.remove(os.options.selectedIndex);
    }
}
function moveOpL(){
    
     var os=document.getElementById("s");
     var os2=document.getElementById("s2");
     if(os2.options.length>=1){
        var txt=os2.options[os2.options.selectedIndex].text;
        var val=os2.options[os2.options.selectedIndex].value;
        var op=new Option(txt,val,true,true);
        os.options.add(op);//[os2.options.length]=op;
        os2.remove(os2.options.selectedIndex);
    }
    
}

</script>
</head>

<body >

  <select name="s" size="4" id="s"  ondblclick="moveOpR()" >
  <option>1&nbsp;</option>
<option>2&nbsp;</option>
<option>3&nbsp;</option>
<option>4&nbsp;</option>
<option>5&nbsp;</option>
<option>6&nbsp;</option>
  </select>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <select name="s2" size="4" id="s2" ondblclick="moveOpL()">
    <option>7&nbsp;</option>
    <option>8&nbsp;</option>
    <option>9&nbsp;</option>
    <option>10&nbsp;</option>
    <option>11&nbsp;</option>
    <option>12&nbsp;</option>
  </select>

</body>
</html>
 
langlan_zt
关注
使用jQuery删除select选项
ByteZenith的博客
10-06 917
在上面的示例中，我们创建了一个带有4个选项的select元素，并在页面上放置了一个按钮。当点击按钮时，通过选择器选择值为2的选项，并从select元素中删除它。替换为你想要删除的选项的实际值。这行代码将通过选择器选中具有指定值的选项。你可以根据自己的需求修改上述代码，以适应你的页面和要删除的选项。希望这可以帮助到你！方法从select元素中删除选项。// 当点击按钮时执行删除操作。在上面的代码中，你需要将。
改进版：在select中添加、修改、删除option元素
12-11
今天休完年假从家回来后，看到小林在QQ发的“监控管理示范代码”，核心原理用的是select元素的 add() 方法： 代码如下: function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var ...
删除select 里的 option
apple_wxs的专栏
01-29 355
[code="html"] a b c [/code]
select通过js删除指定的option选项
05-06
简单的例子，点击按钮就删除掉option，也可以通过jquery加载的时候进行删除。
删除select中所有option
03-11 7122
前段时间在做项目中遇到了一个问题， 就是删除select(下拉框)中的所有选择项option，搜索了API文档中竟然没有全部删除的方法，后来没有办法了就到网上搜了搜终于找到了解决方法，原来当初W3C没有设计此方法，晕倒…… 现在把解决方法如下：//增加之前删除所有option while(length!=0){  var length = document.getElementById
删除select元素里面的所有option及二级分类查询
霓虹深处
06-12 981
删除select元素里面的所有option 三种方法： <select id="city"> <option>湖南</option> <option>上海</option> </select> 使用jquery清空 $("#city").find("option").remove(); 或者...
向元素中动态添加option
08-10
这篇博客“向<select>元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，...
JQuery中对Select的option项的添加、删除、取值
10-26
接下来，我们将讨论如何通过jQuery向`<select>`中添加和删除`<option>`项： ```javascript $("#select_id").append("<option value='Value'>Text</option>"); // 在末尾添加选项 $("#select_id").prepend("<option ...
使用js对select动态添加和删除OPTION示例代码
10-27
在这个场景中，我们关注的是如何使用JavaScript来动态地添加和删除`<select>`元素中的`<option>`选项。`<select>`元素通常用于创建下拉列表，而`<option>`则代表下拉列表中的可选项。 首先，让我们深入理解提供的...
JS动态添加与删除select中的Option对象(示例代码)
10-26
要删除`select`元素中的所有`option`，你可以通过获取`select`元素并访问其`options`属性来实现。`options`属性返回一个`HTMLOptionsCollection`对象，该对象包含了`select`下的所有选项。你可以通过设置`length`...
清空select标签中option选项的4种不同方式
weixin_34143774的博客
12-24 167
转自：https://blog.youkuaiyun.com/pt_sm/article/details/53521560 方法一 document.getElementById("selectid").options.length = 0; 方法二 document.formName.selectName.options.length = 0; 方法三 ...
Jquery 移除 select option
跳动的石头
03-01 2667
&lt;select id = "type" name="type"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;/select&gt; 1.移除 select 下的 option 以 id $("#type").html(""); $("#type").fi
jquery select 移除 option
最新发布
weixin_42298971的博客
07-29 322
jQuery 选择并移除 Option 选项的简单指南 在Web开发中，我们经常需要通过JavaScript来操作HTML元素。jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。本文将介绍如何使用jQuery来选择并移除select元素中的option选...
select中option的增加、删除
热门推荐
sinat_39648402的博客
07-12 1万+
1.增加$('#id').append("&lt;option value= " + keyValue + "&gt;" + keyName + "&lt;/option&gt;");2.常规删除$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) $("#select_id option[index='0'
【代码库】删除select元素节点下所有的OPTION节点
哈士奇
07-26 1284
删除select标签节点下所有的OPTION节点方法一：Js代码 function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options;
S动态添加与删除select中的Option对象 2009年09月23日 15:26 <html> <head> <meta http-equiv="Content-Type" content="t
A_post的专栏
11-06 1900
S动态添加与删除select中的Option对象 2009年09月23日 15:26 JS动态添加删除option //动态删除select中的所有options： function delAllOptions(){       document.getElementById("user_dm").options.length=0; } //动态删除sele
清空select标签中option选项的3种不同方式
爱跳舞的程序员
08-23 73
方法一 代码如下:document.getElementById("selectid").options.length = 0; 方法二 代码如下:document.formName.selectName.options.length = 0; 方法三 代码如下:document.getElementById("selectid").innerHTML = ""; 其他方法： ...
js动态的给select添加或者删除option选项
li646495946的博客
08-31 9083
1.首先select的有id eg : id=“engCategoryId” <g2:select name="_M.engType" list="%{engTypeEnum}" id="engTypeId" listKey="name()" listValue="desc" headerKey="" headerValue="请选择" label="工程类型" onchange="categoryChange()" requiredLabel="true" lab
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值