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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
基于Angularjs实现分页功能
May 30 Javascript
Vue.use源码分析
Apr 22 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
vue 搭建后台系统模块化开发详解
May 01 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
vue中activated的用法
2021/01/03 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python生成随机数的方法
2014/01/14 Python
Python最长公共子串算法实例
2015/03/07 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
应聘教师推荐信
2013/10/31 职场文书
化妆品活动策划方案
2014/05/23 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书