使用jquery Ajax异步刷新 下拉框

Posted 2020-10-29 C_supreme

一个下拉框

<label>产品类型：</label>
        <select id="protype" name="protype" onchange="getNameList()">
            <option value="">--请选择--</option>
        </select>

响应上一个下拉框的结果

的另一个下拉框

<label>产品名称:</label>
        <select id="proname" name="proname">
            <option value="">--请选择--</option>
        </select>

引入jquery包

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

异步刷新代码

function getNameList() {
        var id = $(‘#protype‘).val();
        if (id === "") {
            $(‘#proname‘).html(‘‘);
            var options = ‘‘;
            options += ‘<option value="">--请选择--</option>‘;
            $(‘#proname‘).append(options);
            return;
        }
        var obj = { id: id };
        AjaxCall(‘/Home/GetProList‘, JSON.stringify(obj), ‘POST‘).done(function (response) {
            if (response.length > 0) {
                $(‘#proname‘).html(‘‘);
                var options = ‘‘;
                options += ‘<option value="">--请选择--</option>‘;
                for (var i = 0; i < response.length; i++) {
                    options += ‘<option value="‘ + response[i].Value + ‘">‘ + response[i].Text + ‘</option>‘;
                }
                $(‘#proname‘).append(options);

            }
        }).fail(function (error) {
            $(‘#proname‘).html(‘‘);
            var options = ‘‘;
            options += ‘<option value="">--请选择--</option>‘;
            $(‘#proname‘).append(options);
        });
    }
    function AjaxCall(url, data, type) {
        return $.ajax({
            url: url,
            type: type ? type : ‘GET‘,
            data: data,
            contentType: ‘application/json‘
        });

后台响应代码

        /// <summary>
        /// 用于处理异步刷新下拉框
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult GetProList(string id)
        {
            List<SelectListItem> elems = null;
            if (string.IsNullOrEmpty(id))
                elems = null;
            else
            {
                string filePath = Server.MapPath("/App_Data/SimpleData.xml");
                string filter = string.Format("/DD/DItems[@DValue=‘{0}‘]", id);
                elems = GetListByXpath(filePath, filter);
            }
            return Json(elems, JsonRequestBehavior.AllowGet);
        }

总结 ：

重点在于使用ajax异步post成功之后，处理服务器返回来的数据