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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js中小数转换整数的方法
Jan 26 Javascript
深入探寻javascript定时器
Jan 02 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
小程序实现日历左右滑动效果
Oct 21 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
调频问题解答
2021/03/01 无线电
PHP 第二节 数据类型之数组
2012/04/28 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
vue组件与复用详解
2018/04/08 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Python struct.unpack
2008/09/06 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python 模拟登陆github的示例
2020/12/04 Python
巴西网上药房:onofre
2016/11/21 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
银行实习生的自我评价
2014/01/13 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
个人投资合作协议书
2014/10/12 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
检讨书格式
2015/05/07 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书