级联下拉菜单

cascading the dropdown menu

本文关键字:下拉菜单 级联      更新时间:2023-09-26

这是jquery函数-现在我能够通过城市名称,并将其保存到数据库,但如何改变地方与城市名称的变化。我对jquery一窍不通。无法理解这一行$。getJSON(localityUrl, {ID: $(this).val()}, function (data) {plzzz建议我做一些改变——

     <script type="text/javascript">        
      $(document).ready(function () {
        var localityUrl = '@Url.Action("FetchLocalities")';
        var localities = $('#SelectedLocality');
          $('#SelectedCity').change(function () {  localities.empty();
            subLocalities.empty();
            $.getJSON(localityUrl, { ID: $(this).val() }, function (data) {
                if (!data) {
                    return;
                }
                localities.append($('<option></option>').val('').text('Please select'));
                $.each(data, function (index, item) {
                     localities.append($('<option></option>').val(item.Value).text(item.Text));
                   // localities.append($('<option data-lat=' + item.Latitude + ' data-lng=' + item.Longitude + '></option>').text(item.Text));
                });
            });
        })

,我的城市下拉是这样的 ---------

       <div class="editor-label">
        @Html.LabelFor(model => model.SelectedCity)
        </div>
        <div class="editor-field">
            <select id="SelectedCity" name="SelectedCity">
                @foreach (var thisCity in Model.CityList)
                {
                    <option value="@thisCity.Name" data-lat="@thisCity.Latitude" data-long="@thisCity.Longitude" data-name="@thisCity.Name" >@thisCity.Name</option>
                }
            </select>
            @Html.ValidationMessageFor(model => model.SelectedCity)
    </div>

和我在服务层的城市是这样的——

    public List<City> FetchCities()
      {
       List<City> cities = new List<City>();
       cities.Add(new City() { Id = 1, Name = "--Select Your City--", Latitude = 28.6139M, Longitude = 77.2090M });
       cities.Add(new City() { Id = 2, Name = "Faridabaad", Latitude = 28.4211M, Longitude = 77.3078M });
       return cities;
   }

和我的位置是这样的——

     public List<Locality> FetchLocalities()
      {
       List<Locality> localities = new List<Locality>();
       localities.Add(new Locality() { Id = 1, CityName = "Faridabaad", Name = "East Faridabaad" });
       localities.Add(new Locality() { Id = 2, CityName = "Faridabaad", Name = "West Faridabaad" });
        return localities;
    }

现在我的控制器是这样来获取位置的

        public JsonResult FetchLocalities(string name)
         {
           var data = _localityService.FetchLocalities()
            //.Where(l => l.CityId == Id)
            .Where(l => l.CityName == name)
            .Select(l => new { Value = l.CityName, Text = l.Name });
        return Json(data, JsonRequestBehavior.AllowGet);
    }

localityUrl是您调用的url -在您的情况下,它将是var localityUrl = '@Url.Action("FetchLocalities", "yourControllerName")';

{ ID: $(this).val() }是你传递给控制器的数据,在你的情况下,它需要是{ name: $(this).val() },因为你的方法有参数string name(不是ID)和$(this).val()等于所选选项的值

function (data)中的

data是您从控制器方法返回的数据,在您的情况下,包含2个属性的对象集合,ValueText

不用$. getjson(),你可以通过ajax调用你的控制器动作,并通过传递所需的参数分别重新加载所有的位置