使用AJAX更新DropDownList

Question

after typing client name #NAME1 im trying to get this client subaccounts #SUB in list from other table in db, but my list is empty . What im doing wrong?

html

 <script type="text/javascript">
    var kunnr; var ROLA;
    $(document).ready(function () {

        $('#NAME1').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "Form2",
                    method: 'POST',
                    data: {
                        term: $('#NAME1').val()
                    },
                    success: function (data) {
                        response(data);
                    }});},
            select: function (event, ui) {
                kunnr = ui.item.kunnr;
            }});});
    $('#NAME1').change; ({
        source: function (request, response) {
            $.ajax({
                type: "GET",
                url: "Form3",
                method: 'POST',
                data: {
                    term: $('#SUB').val(), kunnr: kunnr, ROLA:"Slave"
                },
                success: function (data) {
                    response(data);
                }});}, });

controller

    [HttpPost]
    public JsonResult Form2(string term)
    {
        return Json(db.KLIENCI.Where(c => (term!=null && c.NAME1.Contains(term))||(term==null)).OrderBy(x=>x.NAME1).Take(10).Select(a => new { label = a.NAME1,kunnr=a.KUNNR }));
    }
    [HttpPost]
    public JsonResult Form3(string term, string kunnr)
    {
        return Json(db.CLI2LOGIN.Where(c => ((term != null && c.LOGIN.Contains(term)) || (term == null))&& c.KUNNR== kunnr && c.ROLA == "Slave").OrderBy(x => x.LOGIN).Select(a => new { label = a.LOGIN }).ToList(),JsonRequestBehavior.AllowGet);}

Answer 1

Please find below an example:

View:

<script>
$(document).ready(function () {
    $('.maincat').change(function () {
        updateSubCategoryList($(this).val());       
    });

function updateSubCategoryList(catId) {
    $('.subcat').empty();
    $('.subsubcat').empty();
    $.ajax({
        url: '@Url.Action("GetSubCategories")',
        type: 'Get',
        data: { main: catId },
        success: function (response) {
            var subcat = $('.subcat');
            subcat.append('<option value=""></option>');
            if (response != null && response != '') {
                $.each(response, function (index, value) {
                    subcat.append('<option value="' + this.SubCategoryID + '">' + this.SubCategoryDescription + '</option>');
                });
            }
        }
    });
}
</script>

Controller:

        [HttpGet]
        public JsonResult GetSubCategories(int main)
        {
            var i = _jobsservice.GetSubCategories(main);
            return Json(i, JsonRequestBehavior.AllowGet);
        }