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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
迁移PHP版本到PHP7
2015/02/06 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
Prototype Array对象 学习
2009/07/19 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
对python中dict和json的区别详解
2018/12/18 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
《藤野先生》教学反思
2014/02/19 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
找工作求职信
2014/07/07 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
英文导游词
2015/02/13 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis