1、首先我们打开软件进入代码编辑按照图示代码先创建一个下拉框。
2、要运行后网页界面如此显示下拉框。
3、接下来我们按照图示代码用js来获取被选中的值。
4、首先我们通过selectedIndex来获得被选中的下标,再通过下标来获得值。
5、当然,如果你是用jquery的话可以按照图示代码进行设置依然可以获得下拉框的值。
<select name="r_house" id="r_house">
<option value="选项1">选项1</option>
<option value="选项2" selected>选项2</option><!--如果想直接在html中选定某项,给该项加个selected属性即可,不需要编程-->
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
</select>
<script>
window.onload=function(){
//如果一定要js代码实现,可以这样:
//方法一(假定选定第3项,下同):
r_house.value="选项3"
//方法二:
r_house.options[2].selected=true
//方法三:
r_house.children[2].selected=true
//方法四:
r_house.getElementsByTagName("option")[2].selected=true
//方法五:
r_house.querySelectorAll("option")[2].selected=true
//还有N多种方法此略
}
</script>
html下拉框怎么用js添加新值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效果显示如下,自由添加功能实现。