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 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 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
解析PHP工厂模式的好处
2013/06/18 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python中threading超线程用法实例分析
2015/05/16 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
建筑项目策划书
2014/01/13 职场文书
写给女朋友的保证书
2015/05/09 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android