Question

我有2个下拉列表（ul下拉列表），需要根据第一个选择填充第二个。

这是完整的代码

 <div id="dd" class="wrapper-dropdown-1 brderRad" tabindex="1">
                <span>From Any Country</span>
                <ul class="dropdown">                    
                    @foreach (var country in Model.country_list)
                    {
                        <li class="coun" id="@country.country_id"><a href="#">@country.country_name</a></li>
                    }
                </ul>
            </div>

  <div id="dd2" class="wrapper-dropdown-1 brderRad" tabindex="1">
                    <span>From Any City</span>
                    <ul class="dropdown city_drop" id="city_drop_id">

                    </ul>
      </div>

JS

<script type="text/javascript">
    $(document).ready(function () {
    $('.coun').click(function () {
        var id = ($(this).attr('id'));
        $("#city_drop_id").empty();
        $.ajax({
            url: '@Url.Action("GetCityList", "Home")',
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify({ id: $(this).attr('id') }),
            success: function (data) {  
                if (data.success) {
                    var dataa = data.dataDic;
                    $.each(dataa, function (i, item) {                 
                       $('#city_drop_id').append('<li class="selected" value="' + item.ID + '"><a href="#">' + item.Name + '</a></li>');                                         
                    });
                  //  $('#city_drop_id').dropdown('refresh');
                } else {
                    alert('Failed');
                }
            }  
        });  
        });
    });  
</script>

控制器 - 根据国家/地区选择检索城市列表

[HttpPost]
public JsonResult GetCityList(string id)
{
  Dictionary<int, string> cityDic = new Dictionary<int, string>();
  cityDic = citydbRep.GetAllCityList().Where(i=>i.city_country_id 
        ==Convert.ToInt32(id)).ToDictionary(t => t.city_id, t => t.city_name);
  var dataDic = cityDic.Select(u => new
            {
                ID = u.Key,
                Name = u.Value
            });
      return Json(new { success = true, dataDic });
  }

现在追加工作正常，但无法从第二下拉（城市）中选择值。

请有人建议解决这个问题的方法吗？

谢谢

Answer 1

您需要添加级联下拉菜单。你可以通过改变功能来实现这个目标

[yourID].onchange = function () {

}

看this for more detail

从Java脚本追加<li>后，在<ul>下拉列表中选择值

1 个答案: