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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jquery队列函数用法实例
Dec 16 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
JS实现的对象去重功能示例
Jun 04 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:44]Ti10举办地公布
2019/08/25 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python取均匀不重复的随机数方式
2019/11/27 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
会计学应届毕业生推荐信
2013/11/04 职场文书
《雨点》教学反思
2014/02/12 职场文书
亲子读书活动方案
2014/02/22 职场文书
餐厅总厨求职信
2014/03/04 职场文书
高一新生军训方案
2014/05/12 职场文书
开国大典观后感
2015/06/04 职场文书
金砖之国观后感
2015/06/11 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers