博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
select 下拉菜单Option对象使用add(elements,index)方法动态添加
阅读量:6569 次
发布时间:2019-06-24

本文共 2368 字,大约阅读时间需要 7 分钟。

hot3.png

原生js 的add函数为下拉菜单增加选项

1.object.add(oElement [, iIndex])

index 可选参数: 指定元素放置所在的索引号,整形值。如果没有指定值,将添加到集合的最后。 想加到最前面,指定索引值0就可以了。

@@注意:

  add方法为js原生方法,属于element元素对象,在使用jquery对象获取元素时是不可用的

  var select = $('#select');

select.add(new Option(txt,val))

提示:undefined add function()

var obj = document.getElementById('select');

obj.options.add(new Option(txt,val));

正确

var objSelect=document.getElementById("select"); objSelect.options.add( new Option(txt, val)); 或直接写 objSelect.add( new Option(txt, val)); //加在末尾 objSelect.add( new Option(txt, val),0);//加在开头 根据index 选择加载的地方 2.Option对象

  创建一个Option对象 options = new Option('文本','value');

  在<select>标签中创建一个或多个<option value="值">文本</option>   options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

属性:一、option[]数组的属性

    1.length属性---------长度属性

      select.options.length

   2.selectedIndex属性--------当前被选中的框中的文本的索引值, 此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)

    objSelect.options.[obj.selectedIndex].value

   二、单个option的属性(obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个)

/指定 文本 /指定 值,与<options value="...">一致。 , 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项 属性-----返回该对象默认是否被选中。true / false。

option方法:

  1.增加一个<option>标签  obj.options.add(new("文本","值"));

  通过元素增加option选项

  var options= document.createElement("option");   options.value='22';   options.innerText = 'huanying';   select.options.add(options);

  2.删除一个<option>标签     obj.options.remove(obj.selectedIndex)

  删除当前选择的元素     var select =document.getElementById('sele');  select.options.remove(select.options.selectedIndex); var index=obj.selectedIndex; 被选中项

  删除指定index的元素    obj.options.remove(index);             例如:select.options.remove(3);  

  3.获得一个<option>标签的文本  obj.options[obj.selectedIndex].text

    select.options[2].text  取得索引为2的元素的文本值

    select.options[2].value  取得索引为2的元素的value值

  4.修改一个<option>标签的值   obj.options[obj.selectedIndex]=new Option("新文本","新值")

    select.options[2]= new Option('日本','6');

    obj.options[index].selected = true; //保持选中状态

  5.删除所有<option>标签     obj.options.length = 0

删除select标签

select =document.getElementById('sele');

    select.parentNode.removeChild(select); //移除当前对象

添加select标签

  var mySelect = document.createElement_x("select");   mySelect.id = "mySelect";   document.body.appendChild(mySelect);

删除所有options选项

  objselect.options.length= 0;

转载于:https://my.oschina.net/u/2299514/blog/810417

你可能感兴趣的文章
python三步生成二维码
查看>>
统计 DHCP 服务器 ip 分配情况的脚本
查看>>
[每日一题] 11gOCP 1z0-052 :2013-09-28 ORA-01555: snapshot too old......................C52
查看>>
网站判断从百度搜索来的关键词 从而跳转到指定页面
查看>>
线程池
查看>>
Lua1.0 代码分析 table.c
查看>>
maven第二节-maven基础-依赖管理
查看>>
create table as select 与create table后insert方式生成的undo与redo对比
查看>>
linux逻辑卷
查看>>
IO多路复用——select
查看>>
SSH原理与运用(二):远程操作与端口转发
查看>>
OSSIM5.2下载地址
查看>>
VS2010与.NET4.0 系列 1. 干净的Web.config文件
查看>>
VS2010与.NET4系列 8. ASP.NET 4 Web Forms的URL路由
查看>>
C#代码生成xml文档—C#基础回顾
查看>>
Java利用随机数生成字母
查看>>
《鸟哥私房菜》基础篇凌乱的笔记
查看>>
Android 应用程序窗体显示状态操作(requestWindowFeature()的应用)
查看>>
vmware命令集合
查看>>
[白开水]-shell-从数值N累加到M(N<M)-知识点
查看>>