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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
详解Vue中的Props与Data细微差别
Mar 02 Javascript
vue实现井字棋游戏
Sep 29 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下使用以下代码连接并测试
2008/04/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
Node.js实现数据推送
2016/04/14 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
pandas值替换方法
2018/07/10 Python
python list转置和前后反转的例子
2019/08/26 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
采购部部长岗位职责
2014/02/06 职场文书
大课间活动实施方案
2014/03/06 职场文书
先进班集体申报材料
2014/12/26 职场文书
会议通知格式范文
2015/04/15 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python