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 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
JavaScript Date对象详解
Mar 01 Javascript
js图片切换具体实现代码
Oct 13 Javascript
详解node中创建服务进程
May 09 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
PHP实现的统计数据功能详解
2016/12/06 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python实现FTP文件传输的实例
2019/07/07 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
django配置app中的静态文件步骤
2020/03/27 Python
python实现udp聊天窗口
2020/03/31 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
女大学生个人求职信
2013/12/09 职场文书
大学生学习自我评价
2014/01/13 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
Python OpenCV形态学运算示例详解
2022/04/07 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android