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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
javascript arguments使用示例
Dec 16 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
Angular表单验证实例详解
Oct 20 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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 错误处理经验分享
2011/10/11 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python实现2048小游戏
2015/03/30 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python如何对齐字符串
2020/07/30 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
奠基仪式策划方案
2014/05/15 职场文书
环保标语口号
2014/06/13 职场文书
校园广播稿100字
2014/10/06 职场文书
国庆节标语大全
2014/10/08 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书