C#省份城市下拉框联动简单实现方法

当用户需要在网页上选择省份和城市时，通常会使用联动下拉框，即选择省份后再根据省份的选择来显示相应的城市。C#作为一种常见的后端语言，其实现联动下拉框非常简单。下面我们来详细讲解"C#省份城市下拉框联动简单实现方法"。

其实现步骤如下：

1.前端页面设计

首先我们需要一个前端页面，用于展示下拉框。在这个页面中，我们需要提供两个下拉框，一个选择省份，一个选择城市。这两个下拉框的名称分别为"province"和"city"。在选择了省份之后，需要ajax异步传递省份值，后端根据省份值查询其所辖的城市，将查询到的城市数据返回给前端，前端再根据返回的数据将对应城市填充到城市选择下拉框中。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省份城市下拉框联动</title>
</head>
<body>
    <label for="province">请选择省份：</label>
    <select id="province" name="province" onchange="getCity()">
        <option value="">请选择</option>
        <option value="山东">山东</option>
        <option value="河南">河南</option>
    </select>
    <label for="city">请选择城市：</label>
    <select id="city" name="city">
        <option value="">请选择</option>
    </select>

    <script>
        function getCity(){
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6, IE5 浏览器执行代码
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("city").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getcity.aspx?province="+document.getElementById("province").value,true);
            xmlhttp.send();
        }
    </script>

</body>
</html>

2.后端代码实现

在点击省份下拉框后，需要异步发送请求获取城市名称。我们可以在后端编写一个ASPX页面，根据传递的省份值查询城市名称，并将结果返回给前端页面。

示例代码：

void Page_Load(object sender,EventArgs e)
{
    string province = Request.QueryString["province"];
    switch (province)
    {
        case "山东":
            Response.Write(@"<option value="">请选择</option>
                                <option value="济南">济南</option>
                                <option value="青岛">青岛</option>
                                <option value="烟台">烟台</option>
                                <option value="潍坊">潍坊</option>
                                <option value="临沂">临沂</option>");
            break;
        case "河南":
            Response.Write(@"<option value="">请选择</option>
                                <option value="郑州">郑州</option>
                                <option value="洛阳">洛阳</option>
                                <option value="开封">开封</option>
                                <option value="安阳">安阳</option>
                                <option value="平顶山">平顶山</option>");
            break;
        default:
            Response.Write(@"<option value="">请选择</option>");
            break;
    }
}

3.在页面上添加ASPX页面引用

在页面上需要使用到ASPX页面，所以我们需要在页面上引用这个ASPX页面。

<script>
    function getCity(){
        var xmlhttp;
        if (window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        }else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6, IE5 浏览器执行代码
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("city").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getcity.aspx?province="+document.getElementById("province").value,true);
        xmlhttp.send();
    }
</script>

至此，我们就完成了“C#省份城市下拉框联动简单实现方法”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：C#省份城市下拉框联动简单实现方法 - Python技术站

C#省份城市下拉框联动简单实现方法

1.前端页面设计

2.后端代码实现

3.在页面上添加ASPX页面引用

相关文章