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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 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分页函数完整实例代码
2014/09/22 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP引用返回用法示例
2016/05/28 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python+flask实现API的方法
2018/11/21 Python
Python实现FM算法解析
2019/06/18 Python
python扫描线填充算法详解
2020/02/19 Python
postman和python mock测试过程图解
2020/02/22 Python
关于Keras Dense层整理
2020/05/21 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
2014年社区计生工作总结
2014/11/18 职场文书
金秋助学感谢信
2015/01/21 职场文书
工作简报范文
2015/07/21 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
环保建议书范文
2015/09/14 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
python实现简单的名片管理系统
2021/04/26 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js