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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
JavaScript如何判断input数据类型
Feb 06 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实现的Captcha验证码类实例
2014/09/22 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
python 测试实现方法
2008/12/24 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python配置文件处理的方法教程
2019/08/29 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
Linux的文件类型
2012/03/07 面试题
UNIX文件系统分类
2014/11/11 面试题
竞聘上岗演讲稿范文
2014/01/10 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
MySQL开启事务的方式
2021/06/26 MySQL