js动态设置select下拉菜单的默认选中项
2017-01-14 22:32
411 查看
利用javascript设置select下拉菜单的选中项。
代码实例如下:
<!--js动态设置select下拉菜单的默认选中项-->
<html>
<head>
<title>下拉菜单</title>
<script type="text/javascript">
window.onload=function(){
var osel=document.getElementById("selID"); //得到select的ID
var opts=osel.getElementsByTagName("option");//得到数组option
var obt=document.getElementById("bt");
obt.onclick=function(){
opts[3].selected=true;//设置option第4个元素,即value="3"为默认选中
}
}
</script>
</head>
<body>
<select name="select" id="selID">
<option value="0">下拉菜单一</option>
<option value="1">下拉菜单二</option>
<option value="2" selected>下拉菜单三</option>
<option value="3">下拉菜单四</option>
<option value="4">下拉菜单五</option>
</select>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
以上代码实现:
1、初始时选中下拉菜单三;
2、点击按钮可以设置select下拉菜单的默认选中项---下拉菜单四。
代码实例如下:
<!--js动态设置select下拉菜单的默认选中项-->
<html>
<head>
<title>下拉菜单</title>
<script type="text/javascript">
window.onload=function(){
var osel=document.getElementById("selID"); //得到select的ID
var opts=osel.getElementsByTagName("option");//得到数组option
var obt=document.getElementById("bt");
obt.onclick=function(){
opts[3].selected=true;//设置option第4个元素,即value="3"为默认选中
}
}
</script>
</head>
<body>
<select name="select" id="selID">
<option value="0">下拉菜单一</option>
<option value="1">下拉菜单二</option>
<option value="2" selected>下拉菜单三</option>
<option value="3">下拉菜单四</option>
<option value="4">下拉菜单五</option>
</select>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
以上代码实现:
1、初始时选中下拉菜单三;
2、点击按钮可以设置select下拉菜单的默认选中项---下拉菜单四。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法