在 <ul> 下拉列表中选择值，在 Javascript 中附加 <li> 之后答案

【问题标题】：Select value in <ul> dropdown , after append <li> from Java script在 <ul> 下拉列表中选择值，在 Javascript 中附加 <li> 之后
【发布时间】：2017-08-11 03:44:48
【问题描述】：

我有 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>

<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 });
  }

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

请任何人提出解决此问题的方法？

谢谢

【问题讨论】：

什么意思无法从第二个下拉菜单中选择值？你为什么要给你的 <li> 元素一个 value 属性（这是无效的 - 它只适用于表单控件）
city_drop_id 是无序列表元素名称，为什么要附加一个应该存在于表单控件元素上的具有 value 属性的列表项？视图代码中既不是select 元素也不是DropDownList 助手，那么您想以什么方式创建级联下拉列表？

标签： javascript jquery asp.net-mvc html-lists cascadingdropdown

【解决方案1】：

您需要添加级联下拉菜单。您可以在更改功能上实现这一点

[yourID].onchange = function () {

}

看this for more detail

【讨论】：