javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下:
1、HTML结构,包括一个select项,含有三个options。另敏慧衡外,设置input和button,通过自由父子,实现给select增加自定义option。
此时的显示效果碧谨如下,其中option中有三项。
2、JS的函数设计如下:桥做
现有的options如下:
3、在页面上输入新的数据,点击添加。
此时的select效果显示如下,自由添加功能实现。
一、参考的代码案例:
<select name="gender"><option value="男">男</option>
<option 滑判value="女">女</option>
</select>
二、代码实例解释:
例如填写性别的表单 我想吧 "男信没改" 和 "女"这两个察枣属性放到下拉框里
然后提交表单的时候 如果选择的是男的 就将 "男"这个属性提交上去
三、html下拉框可以动态赋值;
1.下拉框当前选中项目 obj.selectedIndex
2.下拉框项目数 obj.length
3.下拉框第N项的值 obj.options[N-1].value
4.下拉框第N项的“描述值” obj.options[N-1].text
5.选中第N项 obj.options[N-1].selected = true=false即为不选中
6.在末尾增加一项 obj.option[ obj.selectedIndex] = new Option("value", "value")
7.下拉框的宽度 obj.width
第一步,在HBuilder编辑工具新建HTML5空白页面select.html,并引入VueJS核心js文件,如下图所凯和示:第二步,在body标签元素内插入div和select,注意给指定标签元素id属性值,如下图所示:
第三步,在div下方编写生成下拉框的数据源和绑定元素,下拉框有value和text,如下图所示:闭孙如
第四步,预览该静态页面,发现下拉框什么都没有;打开浏览器控制台发现出现错误,如下图所示:
第五步,修改option标签数据绑定形式,利用v-bind,将轿启js代码中的sel改为data,如下图所示:
6
第六步,再次预览该静态页面,发现下拉框数据源正确绑定,可以选择,如下图所示:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)