2019独角兽企业重金招聘Python工程师标准>>>

原生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>标签,是一个)

    @1.text属性---------返回/指定 文本     @2.value属性------返回/指定 值,与<options value="...">一致。     @3.index属性-------返回下标,     @4.selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项     @5.defaultSelected 属性-----返回该对象默认是否被选中。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标签

  @1.var 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

select 下拉菜单Option对象使用add(elements,index)方法动态添加相关推荐

  1. CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单

    iframe嵌套单页面 iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */if ...

  2. html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作

    antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值 提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...

  3. html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果

    原标题:怎么把select下拉菜单里的文字设置成左右滚动效果 希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...

  4. 谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景

    01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none    解决. 附:sele ...

  5. html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果

    html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...

  6. select下拉菜单美化简单美化效果

    默认状态下的select下拉菜单简直是丑爆了,所以下面就介绍一下一个简单的方式对select下拉菜单进行美化,下面就是一段这样的代码实例,当然也不够美观,这里只是提供一种美化的思路,在实际应用中可以进 ...

  7. html下拉select美化,美化select下拉菜单

    默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等 ...

  8. html切换下拉菜单改变页面,通过select下拉菜单改变页面内容

    web前端使用技巧:通过select下拉菜单改变页面内容 方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...

  9. JavaScript实现select下拉菜单省份和城市的级联菜单

    使用JavaScript中变量定义省份及对应的城市,应用select标签对象,实现二级级联的下拉菜单选中效果.即在省份下拉菜单中选中一个省份时,在城市下拉菜单中出现该省份对应的城市. HTML代码: ...

最新文章

  1. 立体匹配成像算法BM,SGBM,GC,SAD一览
  2. html流动模型,javascript的事件流模型都有什么?
  3. Kubernetes — 系统架构
  4. 关闭oracle服务 linux,Linux下启动和关闭Oracle服务与数据库
  5. [ZZOJ#31]类欧几里得
  6. esp8266oled做时钟python_利用esp8266和鸿蒙带的OLED屏做了一个时钟
  7. java托盘图标变白在linux,升级Ubuntu后系统托盘图标消失
  8. 企业如何选择SSL证书?
  9. Python 字符串去除空格的方法
  10. his服务器数据修改工具,某三甲医院基于HIS系统升级改造项目的实战分享
  11. 如何在ps添加箭头_照片一键自动添加烟雾特效!赠送PS动作插件 50张高清烟雾素材...
  12. 运维分级发布_运维必备制度:故障分级和处罚规范
  13. 华为U8500在USB调试模式下LOGCAT无打印信息的解决方法
  14. java 生成的excel 用editplus 打开是乱码_「excel打开是乱码」excel出现中文乱码的解决教程 - seo实验室...
  15. python能开发手机app吗_python开发手机app和java相比,缺点是什么?
  16. autoit3转换php,autoit入门基础教程——字符串与变量转换.pdf
  17. 托米的咒语 牛客练习赛23 D
  18. opta球员大数据预测胜负_数据分析视角下的世界杯冠军预测
  19. verilog呼吸灯
  20. 论今日头条背后的产品逻辑分析

热门文章

  1. 2019年工信部重点实验室名单公布 涵盖卫星导航及人工智能等多个领域
  2. 商业航天:通往太空旅程的新门票
  3. MIT教授Tomaso Poggio演讲与专访:智能背后的科学与工程 | 腾讯AI Lab学术论坛
  4. 【免费获取】80+页PPT全方位解读半导体行业
  5. 30 万奖金悬赏 | CSDN 软件开发精英赛即日启动!
  6. 据说只有 Java 程序员才能看懂! | 每日趣闻
  7. 比尔盖茨27年婚姻破裂,8000亿财产咋分配?
  8. 元宵节来了,程序员用 Python 送你一盏 3D 花灯
  9. 刷爆全网的动态条形图,原来 5 行 Python 代码就能实现!
  10. Vue 组件库 HeyUI@1.16.0 更新日志