Select value in dropdown , after append from Java script

Question

I have 2 drop down list (ul dropdown) , need to populate 2nd based on first one selection.

here is the full code

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

---

Controller - to retrieve city list based on country selection

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

Now append is working fine, but couldn't able to select the value from 2nd drop down (city ) .

please any one suggest the way to solve this?

Thank you

Answer 1

you need to add cascade drop down. you can achieve this on change function

[yourID].onchange = function () {

}

look this for more detail