JS简单操作select和dropdownlist实例


Posted in Javascript onNovember 26, 2014

本文实例讲述了JS简单操作select和dropdownlist的方法。分享给大家供大家参考。具体实现方法如下:

一、js选中服务器控件select与dropdownlist

1. js操作服务器控件select

<select id="selectID" onchange="return showMessage()">

     <option value="0">==请选择==</option>

     <option value="1">是</option>

     <option value="2">否</option>

</select>


<script type="text/javascript" language="javascript">

  function showMessage() {

      if (document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value == 1) {

   alert("你好,你选择了第 1 个");

   document.getElementById("txtContractName").setAttribute("enable",false);

      }

      else if (document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value == 2) {

   alert("你好,你选择了第 2 个");

      }

  }

</script>
//js操作服务器控件dropdownlist

<asp:DropDownList ID="ddlFolder" runat="server" SkinID="ddlSkin" AutoPostBack="false" OnSelectedIndexChanged="ddlFolder_SelectedIndexChanged">    

        <asp:ListItem Value="0">选项0</asp:ListItem>   

   <asp:ListItem Value="1">选项1</asp:ListItem>  

</asp:DropDownList>    

<asp:DropDownList ID="ddlFolder" runat="server" SkinID="ddlSkin" AutoPostBack="false" OnSelectedIndexChanged="ddlFolder_SelectedIndexChanged"> 

  <asp:ListItem Value="0">选项0</asp:ListItem>

  <asp:ListItem Value="1">选项1</asp:ListItem> 

</asp:DropDownList>

JS代码:
document.getElementById("ddlFolder").value="0";//0为你要选中的项的value

2. 根据Text值设置选中某项

var DropDownListCurrencyNew =  document.getElementById("ddlFolder");

for(i = 0; i < DropDownListCurrencyNew.options.length; i++)

{

          if(DropDownListCurrencyNew.options[i].text == "选项0")    

           {

               DropDownListCurrencyNew.options[i].selected = true; 

          }

}

二、js读取DropDownList选中项的value和text

Value:

var selValue = document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].value;

Text:

var selText = document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].text;

希望本文所述对大家的js与.net程序设计有所帮助。

Javascript 相关文章推荐
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JavaScript Promise启示录
Aug 12 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 #Javascript
node.js使用require()函数加载模块
Nov 26 #Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 #Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 #Javascript
javascript 原型链维护和继承详解
Nov 26 #Javascript
jquery提示效果实例分析
Nov 25 #Javascript
jQuery操作cookie方法实例教程
Nov 25 #Javascript
You might like
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
js function定义函数使用心得
2010/04/15 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue-router源码之history类的浅析
2019/05/21 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
协议书的格式
2014/04/23 职场文书
工作表现证明
2015/06/15 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书