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 拖拉缩放效果
Dec 10 Javascript
js获取图片宽高的方法
Nov 25 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
浅谈es6中的元编程
Dec 01 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
保护环境倡议书范文
2014/05/13 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
悬空寺导游词
2015/02/05 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL