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的动态删除Table表格的行和列的代码
May 12 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Node 模块原理与用法详解
May 13 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
Element Dialog对话框的使用示例
Jul 26 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
python中xrange用法分析
2015/04/15 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python的re模块使用方法详解
2019/07/26 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
半年思想汇报
2013/12/30 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
30年同学聚会感言
2014/01/30 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
毕业生就业协议书
2014/04/11 职场文书
工作建议书范文
2014/05/13 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python