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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
一个ftp类(ini.php)
2006/10/09 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
js prototype截取字符串函数
2010/04/01 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解Python:面向对象编程
2019/04/10 Python
python提取log文件内容并画出图表
2019/07/08 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
广州地球村科技数据库题目
2016/04/25 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
化工见习报告范文
2014/10/31 职场文书
Python基础详解之描述符
2021/04/28 Python
4种非常实用的python内置数据结构
2021/04/28 Python