纠结于到底是原创还是转载发表,考虑再三,最终还是选择以转载发表,本文参考来自于【fanfengchimo】的

http://blog.csdn.net/fanfengchimo/article/details/2078101的博客文章

及【jack86514】的http://blog.csdn.net/jack86514/article/details/1906436的博客文章。

本人的开发环境为win7+vs2010旗舰版+IE9

现文章整合后如下

1.vs2010创建web网站

2.default.aspx

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
   <script type="text/javascript">
     var httpRequest;
            //输入编辑框失去焦点时,触发ajax加载下拉框(DropDownList)事件
     function TextChanged() {
       var obj = document.getElementById("txtInput");
       var pra = "2";
       createXMLHttpRequest();
                //调用doContents函数
       httpRequest.onreadystatechange = doContents;
                //根据不同的PRA值来调用不同的服务端方法
       httpRequest.open('GET',"request.aspx?pra=" + pra,true);
       httpRequest.send(null);
     }
     //将ajax返回数据加载到下拉框(DropDownList)中
     function doContents() {
       if (httpRequest.readystate == 4) {
         if (httpRequest.status == 200) {
           var str = httpRequest.responseText;
           AddDropDownListItem(str);
         }
       }
       //添加数据到下拉框(DropDownList)中
       function AddDropDownListItem(str) {
         var objItem = str.split('@');
         var obj = document.getElementById("ddlSelectList");
         obj.options.length = 0;
         var i;
         for (i = 0; i < objItem.length; i++) {
           var item = objItem[i].split(';');
           if (item[0] != "" && item[1] != "") {
             obj.options.add(new Option(item[0],item[1]));
           }
         }
         obj.options.options[0].selected = true;
         document.getElementById('Hidden1').value = obj.options[0].innerText;
       }
     }
     //创建XMLHttpRequest对象
     function createXMLHttpRequest() {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
         //httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
     }
     //将选中下拉框(DropDownList)的值赋给隐藏控件(Hidden1)
     function func1() {
       var itemText;
       var obj = document.getElementById("ddlSelectList");
       for (var i = 0; i < obj.options.length; i++)
       {
         if (obj.options[i].selected) {
           itemText = obj.options[i].innerText;
           document.getElementById('Hidden1').value = itemText;
         }
       }
     }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 
 </div>
 <p>
   <input id="txtInput" type="text" onblur="TextChanged();"/>
   <asp:DropDownList ID="ddlSelectList" runat="server" Height="34px" Width="208px" onchange="func1();">
   </asp:DropDownList>
   <input id="Hidden1" type="hidden" name="Hidden1" />
 </p>
 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
 </form>
</body>
</html>
 

注意本页面中需要在第一行增加【EnableEventValidation="false"】,以解决页面出现【回发或回调参数无效】的问题。具体见下图

3.default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender,EventArgs e)
    {
        Response.Write(Request.Form["Hidden1"]);
    }
}

4.request.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="request.aspx.cs" Inherits="request" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
5.request.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class request : System.Web.UI.Page
{
    protected void Page_Load(object sender,EventArgs e)
    {
        Response.Clear();
        string pra = Request.QueryString["pra"].ToString();

        if (pra == "1")
        {
            Response.Write(GetString1());
        }
        else
        {
            Response.Write(GetString2());
        }
        Response.End();
    }

    private string GetString1()
    {
        return "First;1@Second;2@";
    }

    private string GetString2()
    {
        return "Third;1@Nine;2@Ten;3@";
    }
}

以上代码已在上述开发环境进行测试。现记录下来,方便以后查找。目前后台(button事件)代码每次读取前台【Hidden1】隐藏控件的数值时,页面都会刷新一次,个人感觉实用性不是很好。

后台读取前台下拉框选项值(DropDownList)的更多相关文章

  1. HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

    这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下

  2. AngularJS中下拉框的高级用法示例

    这篇文章主要介绍了AngularJS中下拉框的高级用法,结合实例形式分析了AngularJS下拉框的遍历、选择、绑定、显示等功能实现方法,需要的朋友可以参考下

  3. JavaScript实现鼠标经过显示下拉框

    这篇文章主要为大家详细介绍了JavaScript实现鼠标经过显示下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 微信小程序实现简单的select下拉框

    这篇文章主要为大家详细介绍了微信小程序实现简单的select下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. Vue下拉框双向联动效果的示例代码

    这篇文章主要介绍了Vue下拉框双向联动效果,实现联动,大家都知道在vue的页面中,想要实现多个<el-select 下拉框的值动态改变,必须要调用@change 函数,具体操作方法跟随小编一起学习下吧

  6. yii2带搜索功能的下拉框实例详解

    带搜索功能下拉框在项目中经常会用到,下面小编把实现代码分享到脚本之家平台,供大家参考

  7. 可输入文字查找ajax下拉框控件 ComBox的实现方法

    下面小编就为大家带来一篇可输入文字查找ajax下拉框控件 ComBox的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. Javascript select下拉框操作常用方法

    Javascript操作下拉框的常用方法,在js与表单控制中,经常用的到。

  9. jQuery实现鼠标经过购物车出现下拉框代码(推荐)

    在做web前端项目开发的时候,使用jquery库的感触颇多,下面小编通过写购物车的下拉框做法,把我的想法给大家分享一下,感兴趣的朋友可以参考下

  10. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    这篇文章主要介绍了自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框 的相关资料,需要的朋友可以参考下

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部