select 下拉菜单Option对象使用add(elements,index)方法动态添加
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)方法动态添加相关推荐
- CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单
iframe嵌套单页面 iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */if ...
- html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值 提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
- html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果 希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
- 谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景
01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none 解决. 附:sele ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- select下拉菜单美化简单美化效果
默认状态下的select下拉菜单简直是丑爆了,所以下面就介绍一下一个简单的方式对select下拉菜单进行美化,下面就是一段这样的代码实例,当然也不够美观,这里只是提供一种美化的思路,在实际应用中可以进 ...
- html下拉select美化,美化select下拉菜单
默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等 ...
- html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容 方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...
- JavaScript实现select下拉菜单省份和城市的级联菜单
使用JavaScript中变量定义省份及对应的城市,应用select标签对象,实现二级级联的下拉菜单选中效果.即在省份下拉菜单中选中一个省份时,在城市下拉菜单中出现该省份对应的城市. HTML代码: ...
最新文章
- 立体匹配成像算法BM,SGBM,GC,SAD一览
- html流动模型,javascript的事件流模型都有什么?
- Kubernetes — 系统架构
- 关闭oracle服务 linux,Linux下启动和关闭Oracle服务与数据库
- [ZZOJ#31]类欧几里得
- esp8266oled做时钟python_利用esp8266和鸿蒙带的OLED屏做了一个时钟
- java托盘图标变白在linux,升级Ubuntu后系统托盘图标消失
- 企业如何选择SSL证书?
- Python 字符串去除空格的方法
- his服务器数据修改工具,某三甲医院基于HIS系统升级改造项目的实战分享
- 如何在ps添加箭头_照片一键自动添加烟雾特效!赠送PS动作插件 50张高清烟雾素材...
- 运维分级发布_运维必备制度:故障分级和处罚规范
- 华为U8500在USB调试模式下LOGCAT无打印信息的解决方法
- java 生成的excel 用editplus 打开是乱码_「excel打开是乱码」excel出现中文乱码的解决教程 - seo实验室...
- python能开发手机app吗_python开发手机app和java相比,缺点是什么?
- autoit3转换php,autoit入门基础教程——字符串与变量转换.pdf
- 托米的咒语 牛客练习赛23 D
- opta球员大数据预测胜负_数据分析视角下的世界杯冠军预测
- verilog呼吸灯
- 论今日头条背后的产品逻辑分析
热门文章
- 2019年工信部重点实验室名单公布 涵盖卫星导航及人工智能等多个领域
- 商业航天:通往太空旅程的新门票
- MIT教授Tomaso Poggio演讲与专访:智能背后的科学与工程 | 腾讯AI Lab学术论坛
- 【免费获取】80+页PPT全方位解读半导体行业
- 30 万奖金悬赏 | CSDN 软件开发精英赛即日启动!
- 据说只有 Java 程序员才能看懂! | 每日趣闻
- 比尔盖茨27年婚姻破裂,8000亿财产咋分配?
- 元宵节来了,程序员用 Python 送你一盏 3D 花灯
- 刷爆全网的动态条形图,原来 5 行 Python 代码就能实现!
- Vue 组件库 HeyUI@1.16.0 更新日志