• 老代码:js实现二级城市联动(MVC)


    FormViewCity 为mvc控制器传给view的数据,包括一个MyCitys集合字段.

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Main.Master" Inherits="System.Web.Mvc.ViewPage<MvcStudyStep.Controllers.FormViewCity>" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
     <script type="text/javascript">
         var b=<%= Model.MyCitys.Count %>;
         var arrayCity = new Array(b);
     <%
        for(int i = 0; i < Model.MyCitys.Count; i++)
        {
           
    %>
    arrayCity[<%=i%>] = '<%= Model.MyCitys[i].Code+"#"+Model.MyCitys[i].PCode+"#"+Model.MyCitys[i].Name %>';
    <%
        }
        %>
    </script>
     <form action="/City/Save" method="post">
    <select name="myCity" onchange="javascript:CityChange();">
    <option></option>
     <%
         var pCity = from p in Model.MyCitys
                     where p.PCode == ""
                     select p;
         foreach(var o in pCity)
               { %>
               <option value="<%= o.Code%>"><%= o.Name%></option>
            <%} %>
    </select>
    <div id="divCityChild">
    <select name="myCityChild"></select>
    </div>

     <input id="btnSave" type="submit" value="保存" />
    </form>
    <script type ="text/javascript">
        function CityChange() {
            var str = "<select name='myCityChild'>";
            str += "<option></option>";
            var pCity = document.all.myCity.value;
            for (var i = 0; i < arrayCity.length; i++) {
               
                var arrayTemp = arrayCity[i].split('#');
                if (arrayTemp[1] == pCity) {
                    str += "<option value='"+ arrayTemp[0] +"'>";
                    str += arrayTemp[2];
                    str += "</option>";
                }
            }
            str += "</select>";
            //alert(str);
            document.all.divCityChild.innerHTML = str;
        }
    </script>
    </asp:Content>

  • 相关阅读:
    JavaScript表单编程
    JavaScript事件模型
    DOM总结
    CSS3 媒体查询响应式布局
    BOM总结
    JS实现文字图片无缝滚动
    深入理解jQuery事件绑定机制
    被你忽略的jQuery常用方法“特异功能”
    关于BOM的学习总结
    Hello,World!
  • 原文地址:https://www.cnblogs.com/sportdog/p/3487486.html
Copyright © 2020-2023  润新知