一个下拉框
- <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 成功之后, 处理服务器返回来的数据
来源: http://www.bubuko.com/infodetail-2546486.html