js动态增加、插入、修改、删除option

最新推荐文章于 2020-05-12 17:42:03 发布
最新推荐文章于 2020-05-12 17:42:03 发布
阅读量878 收藏 1
点赞数
分类专栏： Web前端 文章标签： button 测试 html

 

 

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  5. <title>js动态增加、插入、修改、删除option</title>   
  6. </head>   
  7.   
  8. <body>   
  9. <form name="myform">   
  10.     <select name="myselect">   
  11.         <option value="1" selected>1</option>   
  12.         <option value="2">2</option>   
  13.         <option value="3">3</option>   
  14.         <option value="4">4</option>   
  15.     </select>   
  16.     <input type="button" οnclick="addOption()" value="增加">   
  17.     <input type="button" οnclick="insertOption()" value="插入">   
  18.     <input type="button" οnclick="delOption()" value="删除">   
  19.     <input type="button" οnclick="setOption()" value="修改">   
  20. </form>   
  21. <script type="text/javascript">   
  22. function addOption(){   
  23.     var myselect = document.myform.myselect;   
  24.     var newoption = new Option("测试", "test");   
  25.     myselect.options[myselect.options.length] = newoption;   
  26. }   
  27. function insertOption(){   
  28.     var myselect = document.myform.myselect;   
  29.     var newoption = new Option("测试", "test");   
  30.     if(document.all){   
  31.         myselect.add(newoption, myselect.selectedIndex);   
  32.     }else{   
  33.         myselect.add(newoption, myselect.options[myselect.selectedIndex]);   
  34.     }   
  35. }   
  36. function delOption(){   
  37.     var myselect = document.myform.myselect;   
  38.     myselect.remove(myselect.selectedIndex);   
  39.     //myselect.options[myselect.selectedIndex] = null; //也可以使用这个方式   
  40.     myselect.focus();   
  41. }   
  42. function setOption(){   
  43.     var myselect = document.myform.myselect;   
  44.     myselect.options[myselect.selectedIndex].text = "修改";   
  45.     myselect.options[myselect.selectedIndex].value = "modify";   
  46. }   
  47. </script>   
  48. </body>   
  49. </html>   
孙彦辉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态添加option和删除option
rugaxm的专栏
06-25 3万+
1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");           mySelect.id = "mySelect";           document.body.appendChild(mySelect);       } 2.添加选项opti
JS添加和删除option
有一天我会老
03-21 1333
添加选项option function addOption(){ //根据id查找对象， var obj=document.getElementById('mySelect'); //添加一个选项obj.add(new Option("文本","值")); //这个只能在IE中有效 obj.options.add(new Option("text","value")); //这个兼容IE与...
javascript中的options.add() options.remove() options(index)或options.item(index)
kbx8916的博客
08-06 3174
javascript操作Select标记中options集合 分类:JAVASCRIPT先来看看options集合的这几个方法： options.add(option)方法向集合里添加一项option对象； options.remove(index)方法移除options集合中的指定项； options(index)或options.item(index)可以通过索引获取options集合的
js对select动态添加和删除OPTION
小树吥倒
01-10 955
change="getvalue(this)">     动态删除select中的所有options：        document.getElementById("ddlResourceType").options.length=0;      动态删除select中的某一项option：        document.getElementById("ddlR
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）...
弘毅
12-14 274
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到length） // 4.删除select中选中的项 function jsRemo...
js动态添加,删除option及add的使用方法
weixin_30602505的博客
12-13 401
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态建立select及option及add的使用</title> </head> <body> </body> &l...
jQuery增加、删除及修改select option的方法
10-21
#### 增加、删除、修改select中的option项 1. **向select中追加一个option**: ```javascript $('#select_id').append("<option value='Value'>Text</option>"); ``` 此代码会在select元素的底部增加一个新的...
JSP中使用JavaScript动态插入删除输入框实现代码
10-25
为了应对这种情况，我们可以利用JavaScript来动态地在页面上增加或删除输入框，从而提高用户界面的友好性和交互性。本文主要介绍在JSP页面中如何使用JavaScript来实现输入框的动态插入和删除功能。 首先需要理解的...
向元素中动态添加option
08-10
这篇博客“向元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，包括添加、...
jquery动态添加option
03-21
jQuery库提供了一种简单的方法来操作DOM（文档对象模型），使得插入、删除和修改元素变得易如反掌。要动态添加`<option>`，我们可以使用`append()`方法。以下是一个示例： ```javascript // 创建一个新的option元素...
JS对select动态添加options操作(已测)
我笔记
05-12 3938
此非常好用 document.getElementById("ddlResourceType").options.add(new Option(text,value)); 下拉框： <select id="ddlResourceType" onchange="getvalue(this)"> </select> 1、动态删除select中的所有options： document.getElementById("ddlResourceType").options..
js控制options的几个选中和自动添加options值
学会坚强
12-07 693
[b]判断第几个选中[/b] if ('${da1}' == 1) { document.forms[0].selZqda.options[1].selected = true; } if ('${da2}' == 2) { document.forms[0].selZqda.options[2].selected = true; } [b]自动添加值[/b] ...
js里对options的增加删除提交操作
wthorse的专栏
08-07 1457
function AddRight(){  var index=document.form1.selectNewsone.selectedIndex;  var obj2=document.form1.selectk  if (index  var value=document.form1.selectNewsone.options[index].value;  var text=document
js 动态设置 option 的selected 选项
g_maimai_123的博客
05-03 7167
html代码：&lt;select id="a"&gt;    &lt;option selected value="0"&gt;- Please -&lt;/option&gt;    &lt;option value="1"&gt;apple&lt;/option&gt;    &lt;option value="2"&gt;su
JS对select操作
weixin_34327761的博客
01-30 655
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
JS中的new option(), options
热门推荐
不想写代码的一天
06-11 1万+
new Option(“文本”,“值”,true,true) 后面两个true分别表示默认被选中和有效! 动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelec...
select option操作大全
mz_hj的博客
06-11 594
&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;title&gt;JS动态添加删除option&lt;/title&gt;&lt;script&gt;//动态删除select中的所有options：function
JavaScript操作select与option的实用技巧及代码示例
为了实现动态响应用户的选项选择，可以利用`change`事件，如`$(“#mySelect”).change(function(){…})`，在用户更改选项时执行特定的JavaScript代码，例如更新表单验证、发送数据等。 7. **动态创建`<select>`**:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值