DropDownList 连动两个 - stript

最新推荐文章于 2021-02-27 11:02:25 发布
最新推荐文章于 2021-02-27 11:02:25 发布
阅读量777 收藏
点赞数
分类专栏： asp.net 技术 文章标签： server button string input asp function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xtxk_917/article/details/752249
版权

Default2.aspx

<%@ Page Language="C#" EnableEventValidation="false"  AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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">
        <asp:DropDownList ID="t1" runat="server">
        </asp:DropDownList>
        &nbsp;
        <asp:DropDownList ID="t2" runat="server">
        </asp:DropDownList>&nbsp;
        <br />
        <input id="Hidden_t1" runat="server" type="hidden" />
        <input id="Hidden_t1_index" runat="server" type="hidden" />
        <input id="Hidden_t2" runat="server" type="hidden" />
        <input id="Hidden_t2_index" runat="server" type="hidden" /><br />
        &nbsp;&nbsp;
       
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />&nbsp;
    </form>
</body>
</html>


Default2.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
    conn con = new conn();
    protected void Page_Load(object sender, EventArgs e)
    {
        ///
        ///加载 DropDownList t1 t2 onchange 事件
        ///
        t1.Attributes.Add("onchange", "tj1()");
        t2.Attributes.Add("onchange", "jl()");
        ///
        ///生成 myArray 数组
        ///myArray[i][0] 为 t1 的值
        ///myArray[i][j] 为 t2 的值
        ///
        //***********************************************************************************************//
        //数组
        string myArr = "var myArray = [];";
        //省
        DataTable dt = new DataTable();
        dt = con.Table("select * from dq_sheng");
        int chang = dt.Rows.Count;
        string[,] sheng = new string[2, chang];
        for (int i = 0; i < chang; i++)
        {
            sheng[0, i] = dt.Rows[i]["prov_id"].ToString().Trim();
            sheng[1, i] = dt.Rows[i]["prov_name"].ToString().Trim();
            //数组
            myArr += "myArray[" + i.ToString() + "] = [];/r/n";
        }

        //市
        DataTable dt1 = new DataTable();
        dt1 = con.Table("select * from dq_shiqu");
        for (int i = 0; i < chang; i++)
        {
            //数组
            myArr += "myArray[" + i.ToString() + "][0] = '" + sheng[1, i] + "';/r/n";

            DataRow[] dr = dt1.Select("prov_id='" + sheng[0, i] + "'");
            for (int j = 0; j < dr.Length; j++)
            {
                myArr += "myArray[" + i.ToString() + "][" + (j + 1).ToString() + "] = '" + dr[j]["city_name"].ToString().Trim() + "';/r/n";
            }
        }
        //***********************************************************************************************//
        ///
        ///逻辑
        ///
        string scr_lj = "for(var i=0;i<myArray.length;++i)" + "/r/n";
        scr_lj += "{" + "/r/n";
        scr_lj += "var oOption = document.createElement('OPTION');" + "/r/n";
        scr_lj += "oOption.text = myArray[i][0];" + "/r/n";
        scr_lj += "oOption.value = i;" + "/r/n";
        scr_lj += "document.getElementById('t1').options.add(oOption);" + "/r/n";
        scr_lj += "}" + "/r/n";
        scr_lj += "document.getElementById('t1').selectedIndex=0;" + "/r/n";
        scr_lj += "tj1();" + "/r/n";

        ///
        ///当选择
        ///DropDownList t1 onchange 事件 时发生
        ///
        string src_t1_change = "<script type='text/javascript'>" + "/r/n";
        src_t1_change += "function tj1()" + "/r/n";
        src_t1_change += "{ " + "/r/n";
        src_t1_change += "var y=document.getElementById('t1').options[document.getElementById('t1').selectedIndex].value;" + "/r/n";
        src_t1_change += "for(var i=document.getElementById('t2').options.length-1;i>=0;--i)" + "/r/n";
        src_t1_change += "{" + "/r/n";
        src_t1_change += "document.getElementById('t2').options.remove(i);" + "/r/n";
        src_t1_change += "}" + "/r/n";
        src_t1_change += "for(var j=1;j<myArray[y].length;j++)" + "/r/n";
        src_t1_change += "{" + "/r/n";
        src_t1_change += "var oOption = document.createElement('OPTION');" + "/r/n";
        src_t1_change += "oOption.text = myArray[y][j];" + "/r/n";
        src_t1_change += "oOption.value = myArray[y][j];" + "/r/n";
        src_t1_change += "document.getElementById('t2').options.add(oOption);" + "/r/n";
        src_t1_change += "}" + "/r/n";
        src_t1_change += "jl();" + "/r/n";
        src_t1_change += "}" + "/r/n";
        src_t1_change += "</script>" + "/r/n";

        ///
        ///记录两个DropDownList 的值
        ///
        string src_jl = "<script type='text/javascript'>" + "/r/n";
        src_jl += "function jl()" + "/r/n";
        src_jl += "{" + "/r/n";
        src_jl += "document.getElementById('Hidden_t1').value=document.getElementById('t1').options[document.getElementById('t1').selectedIndex].text;" + "/r/n";
        src_jl += "document.getElementById('Hidden_t2').value=document.getElementById('t2').options[document.getElementById('t2').selectedIndex].text;" + "/r/n";
        src_jl += "document.getElementById('Hidden_t1_index').value=document.getElementById('t1').selectedIndex;" + "/r/n";
        src_jl += "document.getElementById('Hidden_t2_index').value=document.getElementById('t2').selectedIndex;" + "/r/n";
        src_jl += "}" + "/r/n";
        src_jl += "</script>" + "/r/n";


        //加载
        Page.RegisterStartupScript("scr1", src_jl);
        Page.RegisterStartupScript("scr2", src_t1_change);
        Page.RegisterStartupScript("scr3", "<script>" + myArr + scr_lj + "</script>");

        //如果不是第一次
        if (Page.IsPostBack)
        {
            Page.RegisterStartupScript("scr4", "<script>document.getElementById('t1').selectedIndex=" + Hidden_t1_index.Value + ";tj1();document.getElementById('t2').selectedIndex=" + Hidden_t2_index.Value + ";</script>");
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Page.Response.Write(Hidden_t1.Value + Hidden_t2.Value);
    }
}

xtxk_917
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MVC里面两个dropdownlist联动
clear_zero的专栏
03-21 3801
MVC view里面有两个dropdownlist分别邦定到两个属性 View里面 @Html.LabelFor(m => m.Name, new { @class = "form-label" }) @Html.DropDownListFor(m => m.Id, (IEnumerable)ViewData[
gridview中两个个dropdownlist联动
02-24
本篇文章将详细介绍如何在GridView中实现两个DropdownList的联动。 首先，我们需要在GridView的定义中添加两个TemplateField，分别用于显示和编辑"乡"和"村"。每个TemplateField中包含一个HiddenField用于存储当前...
POJ题目Java代码（一）
bear_huangzhen的专栏
06-13 5023
POJ1001Exponentiation
两个DropDownList的联动-----ASP.NET
xinworld123的专栏
04-06 946
当第一个DropDownList中的数据变动时，触发 事件onselectedindexchanged，在这个事件中完成对第二个DropDownList的数据绑定； 示例：城市和省份的联动     protected void Page_Load(object sender, EventArgs e)     {         if (!Page.IsPostBack)
为dropdownlist循环绑定1-100
征途人生&梦
03-20 937
ArrayList ai = new ArrayList();         for (int i = 1; i         {             ai.Add(i.ToString());         }         this.dropdownlist1.DataSource = ai
ASP.NET 两个DropDownList控件的动态联动
shaoyanning的博客
04-06 4120
通过一个简单的例子，展示了，两个Dropdownlist控件的动态联动。
DropDownList1_SelectedIndexChanged-的使用
hbqjzx的专栏
01-20 5986
怎样使当DropDownList1改变时也改变相应的DropDownList2的值？ 实现二级联动。如省市联动啊。 以下有代码。 将DropDownList1的AutoPostBack属性设为true 导入命名空间 Imports System.Data Imports System.Data.SqlClient Private Sub Page_Load(ByVal sen
C# 数组作为DropDownList数据源实例---年月日加载
zjk20108023的专栏
05-11 1501
protected void Page_Load(object sender, EventArgs e) { bindday(yearDropDL.SelectedValue, monthDropDL.SelectedValue); } public void bindday(string y, st
【.net基础】--DropDownList控件：两级联动
慢慢的长大
05-11 5239
最近学习Asp.Net，发现很多控件都很有意思，例如：Canlender，AdRotator等。以前只知道有这样的页面效果，但是对这些控件了解并不多。不怕不知道，就怕不知道。
java实现两个列表框关联_两个下拉列表框进行关联
weixin_42533243的博客
02-27 1058
这个功能是注册常见的功能模块之一,就是当你点击第一个包含省份的下拉列表框时,第二个包含城市的下拉列表相应的显示出来.如何实现这样的功能?我个人认为数据库本身的设计很关键,设计如下:Privince_Info表列名数据类型长度允许空p privince_idchar6privincevarchar50City_Info表列名数据类型长度允许空p city_idchar6f privince_...
DropDownList绑定数据表实现两级联动示例
10-26
主要介绍了DropDownList绑定数据表实现两级联动具体实现,需要的朋友可以参考下
asp.net中不能在DropDownList中选择多个项 原因分析及解决方法
10-27
在编辑页面时，如果遇到类似问题，应检查HTML源码，确保没有两个或更多的`Selected="True"`属性在同一DropdownList中。在给出的示例中，`Com_Ygrenshu`控件初始就有两个Item的`Selected="True"`，这是错误的。正确的...
在ASP.NET 2.0中操作数据：使用两个DropDownList过滤的主-从报表
10-28
这个是asp.net 2.0 教程之三层开发教程中的第八篇，从头到尾都看过，也做过相应的实验，觉得没有什么问题，发上来大家一起看看吧。
在ASP.NET 2.0中操作数据：使用两个DropDownList过滤的主-从报表(源码)
10-28
这个是《在ASP.NET 2.0中操作数据：使用两个DropDownList过滤的主-从报表》相应的源码，大家可以下来一起看看。
DropDownList下拉菜单
baiduwenku112的博客
11-06 812
DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单： <inputid="color"value="1"/> <selectid="size"> <option>S-63/4"</option> <option>M-71/4"</option> <option>L-71/8"</optio...
DataGrid 导出 word 和 excel
05-23 1686
   WebForm3        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">                runat="server">     Text="导出word">     Text="导出excel">这个在我这里好用.在"引用"填加引用 -> com -> Microsoft Ex
程序中为Access数据库创建表，其中一列为自动编号类型
10-09 1359
   using System;     using ADOX;          ...      string dbName = "C://MyMDB.mdb";      ADOX.CatalogClass cat = new ADOX.CatalogClass();      cat.Create("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=
小事件1
04-26 1139
using System;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.ComponentModel;using System.Collections;using System.Diagnostics;using S
el-dropdownlist单击事件
最新发布
10-18
el-dropdownlist 是 Element UI 中的一个下拉列表组件，它提供了多种事件供我们使用，其中包括单击事件。当用户单击下拉列表中的某一项时，就会触发该事件。我们可以通过在 el-dropdownlist 标签上绑定 @command 事件来监听单击事件，具体代码如下： ```html <el-dropdown @command="handleClick"> <span class="el-dropdown-link"> 下拉列表<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="item1">选项一</el-dropdown-item> <el-dropdown-item command="item2">选项二</el-dropdown-item> <el-dropdown-item command="item3">选项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` ```javascript methods: { handleClick(command) { console.log(`您单击了 ${command} 选项`); } } ``` 在上面的代码中，我们在 el-dropdown 标签上绑定了 @command 事件，并将其指向 handleClick 方法。当用户单击下拉列表中的某一项时，handleClick 方法就会被调用，并且会传入该项的 command 值作为参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值