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高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
详解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中Session的概念
2006/10/09 PHP
php object转数组示例
2014/01/15 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
django框架创建应用操作示例
2019/09/26 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
税务干部鉴定材料
2014/02/11 职场文书
统计学教授推荐信
2014/09/18 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
初三毕业感言
2015/07/31 职场文书
新员工入职感想
2015/08/07 职场文书
情况说明书怎么写
2015/10/08 职场文书
python b站视频下载的五种版本
2021/05/27 Python
使用Django框架创建项目
2022/06/10 Python