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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
scrapy-splash简单使用详解
2021/02/21 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
建筑施工员岗位职责
2013/11/26 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
党员身份证明材料
2015/06/19 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL