JS简单操作select和dropdownlist实例

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 客户端用JavaScript填充DropDownList控件 服务器端读不到值

    填充没有任何问题,但是在服务器端却取不出来下拉表中的内容.页面代码如下. 复制代码 代码如下: <form id="form1" runat="server"> <div> <h3>看看用js填充的dropdownlist控件在服务器端能读出来吗?</h3> 三个级联下拉列表框: <asp:DropDownList runat="server" id="bigTypeList&quo

  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi

  • js给dropdownlist添加选项的小例子

    复制代码 代码如下: <input name="" type="text"  id="newDirtxt"/> <input class="btn" name="" type="button" value="创建新目录"  onclick="newDir()" /> ?<BR><BR><BR&g

  • 利用js给DropdownList赋值实例

    利用js给DropdownList赋值实例

    话不多说,请看下面代码 var row = [{ "code": "1", "model": "APOLLO" }, { "code": "2", "model": "APOLLO M/B1"}]; for (var i = 0; i < row.length; i++) { var addOption = document.createEl

  • 用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

    用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

    用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置. 准备数据,创建一个对象,将是存储DropDownList控件每个Item数据. 复制代码 代码如下: Imports Microsoft.VisualBasic Namespace Insus.NET Public Class Catalog Private _ID As Integer Private _Name As String Public Property ID As Integer Get

  • JS获取DropDownList的value值与text值的示例代码

    相关JS: 复制代码 代码如下: <script type="text/javascript" language="javascript">    function SearchChange()    {        var ddl = document.getElementById("DropDownList1")           var index = ddl.selectedIndex; var Value = ddl.o

  • JavaScript与DropDownList 区别分析

    比如<asp:LinkButton>控件就被渲染成了<a>锚点控件,这里要讲的DropDownList控件也一样,被渲染成了普通的select控件,在如下的asp.net页面中定义了一个web服务器控件DropDownList和一个普通的select控件(主要为了对比). 代码 复制代码 代码如下: <asp:DropDownList ID = "ddlCities" runat = "server"> <asp:ListI

  • JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

  • JS简单操作select和dropdownlist实例

    本文实例讲述了JS简单操作select和dropdownlist的方法.分享给大家供大家参考.具体实现方法如下: 一.js选中服务器控件select与dropdownlist 1. js操作服务器控件select 复制代码 代码如下: <select id="selectID" onchange="return showMessage()">      <option value="0">==请选择==</optio

  • js简单实现Select互换数据的方法

    js简单实现Select互换数据的方法

    本文实例讲述了js简单实现Select互换数据的方法.分享给大家供大家参考.具体如下: 这里基于javascript实现两个Select互换数据,简单实用,大家都见到过的,不多说了,即使手头暂时用不上,收藏起来,以备后用. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-cha-data-codes/ 具体代码如下: <title>两个Select互换数据,简单实用</title> <script lan

  • js简单的分页器插件代码实例

    js简单的分页器插件代码实例

    这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 自己引入jquery插件,我的demo是引入的自己本地的query 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/

  • JS简单实现无缝滚动效果实例

    JS简单实现无缝滚动效果实例

    本文实例讲述了JS简单实现无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8" /> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description"

  • js简单网速测试方法完整实例

    js简单网速测试方法完整实例

    本文实例讲述了js简单网速测试方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <m

  • js简单实现标签云效果实例

    js简单实现标签云效果实例

    本文实例讲述了js简单实现标签云效果.分享给大家供大家参考.具体如下: 这里的JavaScript标签云,基于妙味课堂miaov.js文件,非常流行的网页效果,在网页的右侧或左侧开辟一小块地方,用来显示热门的标签,形式就选择标签云吧,绝对酷哦,相信你也会喜欢. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • jQuery简单操作cookie的插件实例

    本文实例讲述了jQuery操作cookie的插件.分享给大家供大家参考,具体如下: jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var e

  • JS简单实现自定义右键菜单实例

    RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我

  • JS简单实现文件上传实例代码（无需插件）

    复制代码 代码如下: <span class="up-btn" id="selectFile">请选择文件</span><input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" /> // 点击#selectFile触发input:f

  • jquery操作select取值赋值与设置选中实例

    本节内容: jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("

随机推荐