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的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
Angular 数据请求的实现方法
May 07 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
详解python持久化文件读写
2019/04/06 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
电大自我鉴定
2013/10/27 职场文书
统计员岗位职责
2013/11/14 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
促销活动总结报告
2014/04/26 职场文书
老干部工作先进事迹
2014/08/17 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
详解Vue router路由
2021/11/20 Vue.js