js实现下拉列表选中某个值的方法(3种方法)


Posted in Javascript onDecember 17, 2015

本文实例讲述了js实现下拉列表选中某个值的方法。分享给大家供大家参考,具体如下:

方法1:

<select id="aa">
<option>1</option>
<option>2</option>
</select>
<input type="button" value=" 选中" onclick="checkOption()" />
<script language="javascript" type="text/javascript" >
function checkOption()
{
 document.getElementById("aa").options[1].selected = true;
 alert("选中了2");
}
</script>

方法2:

有一个如下的drop down

<select name="" >
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
.......

不在表单之内的下拉列表框mycombo的操作

document.all( "mycombo ").selectedIndex=2 // 成功选中“苹果”这一项
mycombo.selectedIndex=2 // 成功选中“苹果”这一项 
document.mycombo.selectedIndex=2 // 失败

在表单myform之内的下拉列表框combo2的操作

document.all( "combo2 ").selectedIndex=2 // 成功选中“买水果”这一项
myform.combo2.selectedIndex=2 // 成功选中“买水果”这一项 
document.myform.combo2.selectedIndex=2 // 成功选中“买水果”这一项

方法3:

可以通过value来赋值。

举例如下:

下拉列表代码如下:

<select onPropertyChange="showValue(this.value)" id="mysel">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="changevalue" onclick="setvalue();">

JS函数代码如下:

function setvalue() {
 document.getElementById("mysel").value="2";
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中this做事件参数相关问题解答
Mar 17 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
浅谈js中的闭包
Mar 16 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
详解js图片轮播效果实现原理
Dec 17 #Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 #Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 #Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 #Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python日志记录模块实例及改进
2017/02/12 Python
python assert的用处示例详解
2019/04/01 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
毕业生精彩的自我评价分享
2013/10/06 职场文书
聘用意向书
2014/07/29 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
执行力心得体会范文
2016/01/11 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis