相关联的下拉框绑定与触发

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：VS与MVC JS
作者：陈锦通
撰写时间：2019年5月15日星期三
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

首先，绑定你要绑定的下拉框数据。我这里要绑定是省份的下拉框和城市下拉框和城镇下拉框。HTML的代码如下：

<!--省份-->
<select id="province" name="province" class="form-control select2 col-1"></select>
<!--城市-->
<select id="city" name="city" class="form-control select2 col-1"></select>
<!--城镇-->
<select id="town" name="town" class="form-control select2 col-1"></select>
<div class="col-sm-5 px-0">
<input type="text" class="form-control" id="Nowdi" name="Nowdi" />
</div>

上面就是下拉框的HTML代码我以它们的id来给它们绑定下拉框的数据，然后jq来写绑定事件，要注意要有jq一定要引有jq的js文件否则会报错，这个问题一定要注意。下面是jq代码：

function loadcity() {
            //省份下拉框数据绑定
            createSelect("#province", "Province");
            //省份下拉框数据绑定，触发城市下拉框数据绑定
            $("#province").change(function () {
                //获取选中的省份
                var provinceID = $("#province").val();
                //绑定城市下拉框数据
                createSelect("city", "City?ProvinceID=" + provinceID);
                $("#city").empty();
                $("#town").empty();
            });
            //城市下拉框数据绑定，触发城镇下拉框数据的绑定
            $("#city").change(function () {
                //获取选中的城市ID
                var provinceID = $("#province").val();
                var gradeId = $("#city").val();
                //城镇下拉框数据绑定
                createSelect("#town", "Town?CityID=" + gradeId + "&provinceID=" + provinceID);
                $("#town").empty();
            });

上面是jq代码，解释如下：
createSelect("#province", “Province”);
为什么要在方法里面单独绑定省份下拉框呢？因为当你重新选择城市的下拉框的时候它把省份下拉框的数据也清空了，所以要写一个绑定事件给省份下拉框。
$("#city").empty();
$("#town").empty();
为什么在省份下拉框下面写俩个下拉框清空呢？因为你重新选择省份的时候要清空城市和城镇的下拉框。
$("# town ").empty();的意思是当重新选择城市的时候，城镇下拉框需要清空。
还有控制器那里的代码：
这里是省份下拉框的数据查询

public ActionResult Province()
{
            //查询数据
 List<SelectVo> listProvince = (from tbProvince in myModel.D_Province 
                                select new SelectVo{
                                   id = tbProvince.ProvinceID,
                                  text = tbProvince.Provincename
                                  }).ToList();
            return Json(listProvince, JsonRequestBehavior.AllowGet);
}

下面是城市的下拉框数据的查询和上面的差不多只不过城市下拉框查询的时候多了个省份id的查询

public ActionResult City(int ProvinceID)
{
   List<SelectVo> listCity = (from tbCity in myModel.D_City
                              where tbCity.ProvinceID == ProvinceID
                              select new SelectVo
                              {
                                 id = tbCity.CityID,
                                 text = tbCity.Cityname
                              }).ToList();
            return Json(listCity, JsonRequestBehavior.AllowGet);
}

where里面的是判断的是获取在ProvinceID（省份id）相同的id的城市数据
来查询这个等于这个省份id的城市，然后返回到页面上的下拉框里面。
然后城镇的查询也是通过CityID（城市id）来查询相同城市id的城镇，然后返回到页面上的城镇下拉框里面。