延迟加载下拉列表内容

g21121

浏览: 693837 次
性别:
来自: 北京

最近访客更多访客>>

lbyzx123

cuityang

jin361612388

knight_black_bob

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在开发过程中经常会遇到延迟加载或联动加载的情况，比如前一个下拉列表决定了后一个下拉列表的内容，这种情况在选择邮寄地址中最为常见。

下图就是京东添加收货地址的例子，后两个select会根据上一个所选的值进行加载和联动：

我们仿照上面的例子来实现一个延迟联动加载地区的demo：

1.新建一个html页面，其中只有三个select下拉列表组件，代码如下：

省份：<select id="province" style="width: 90px;margin: 10px;"></select>
城市：<select id="city" style="width: 90px;margin: 10px;"></select>
区/县：<select id="district" style="width: 90px;margin: 10px;"></select>

代码很简单，创建了三个下来列表组件，分别代表了省份列表、城市列表以及区县列表，从代码中我们可以看到，这三个select并没有option列表项，也就是没有值。

2.编写动态加载列表项js方法，这里用到的是JQuery：

/**
 * 加载地址
 * 
 * @param id
 *          所选择的id
 * @param path
 *          请求路径
 * @param selectid
 *          需要赋值的Select列表
 * @param isClean
 *          是否清空该列表已有值
 * @param isAllSelectOption
 *          是否先加入“全部”option项
 * @param isPlsSelectOption
 *          是否先加入“请选择”option项
 * @param defaultValue
 *          默认值
 */
function loadAddress(id, path, selectid, isClean, isAllSelectOption, isPlsSelectOption, defaultValue) {
  // 如果未定义isClean参数，默认为清空原有数据
  if (typeof (isClean) == "undefined") {
    isClean = true;
  }

  // 是否需要清空数据
  if (isClean) {
    $("#" + selectid).empty();
  }

  // 是否加入“请选择”项
  if (isPlsSelectOption) {
    addCustomOption(selectid, 'noSelected', '请选择');
  }

  // 是否加入“全部”项
  if (isAllSelectOption) {
    addCustomOption(selectid, 'all', '全部');
  }

  // get请求，获取数据
  if (id != "") {
    $.get(path, {
      id : id
    }, function(data) {
      if (typeof (data.textContent) == "undefined") {
        jQuery.each(data, function(i, item) {
          $("#" + selectid).append("<option value='" + item.value + "'>" + item.name + "</option>"); // 为Select追加一个Option(下拉项)
        });
        if (defaultValue != "undefined" && defaultValue != "" && defaultValue != null) {
          setSelectedOption(selectid, defaultValue);
        }
      }
    });
  }
}

/**
 * 添加指定option项
 * 
 * @param selectid
 * @param value
 * @param name
 */
function addCustomOption(selectid, value, name) {
  $("#" + selectid).prepend("<option value='" + value + "' selected = 'selected'>" + name + "</option>");
}

一共只有两个方法，通过addCustomOption方法可以将select列表中添加诸如“全部”、“请选择”这样的初始选项或根据需要自定义选项。

loadAddress方法中id是需要传递的查询参数，比如当从省份列表中先选择了“北京”，此时代表北京的option的value为1，则把此id传递给loadAddress方法，通过loadAddress方法查询id为1的所有下属城市或区县。

完成后的代码即为：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态延迟加载select</title>
</head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
  /**
   * 加载地址
   * 
   * @param id
   *          所选择的id
   * @param path
   *          请求路径
   * @param selectid
   *          需要赋值的Select列表
   * @param isClean
   *          是否清空该列表已有值
   * @param isAllSelectOption
   *          是否先加入“全部”option项
   * @param isPlsSelectOption
   *          是否先加入“请选择”option项
   * @param defaultValue
   *          默认值
   */
  function loadAddress(id, path, selectid, isClean, isAllSelectOption, isPlsSelectOption, defaultValue) {
    // 如果未定义isClean参数，默认为清空原有数据
    if (typeof (isClean) == "undefined") {
      isClean = true;
    }

    // 是否需要清空数据
    if (isClean) {
      $("#" + selectid).empty();
    }

    // 是否加入“请选择”项
    if (isPlsSelectOption) {
      addCustomOption(selectid, 'noSelected', '请选择');
    }

    // 是否加入“全部”项
    if (isAllSelectOption) {
      addCustomOption(selectid, 'all', '全部');
    }

    // get请求，获取数据
    if (id != "") {
      $.get(path, {
        id : id
      }, function(data) {
        if (typeof (data.textContent) == "undefined") {
          jQuery.each(data, function(i, item) {
            $("#" + selectid).append("<option value='" + item.value + "'>" + item.name + "</option>"); // 为Select追加一个Option(下拉项)
          });
          if (defaultValue != "undefined" && defaultValue != "" && defaultValue != null) {
            setSelectedOption(selectid, defaultValue);
          }
        }
      });
    }
  }

  /**
   * 添加指定option项
   * 
   * @param selectid
   * @param value
   * @param name
   */
  function addCustomOption(selectid, value, name) {
    $("#" + selectid).prepend("<option value='" + value + "' selected = 'selected'>" + name + "</option>");
  }
</script>
<script type="text/javascript">
	$(function() {
	//初始化，加载所有省份至province列表
		loadAddress('all',加载所有省份方法Path, "province", true,false,true);
	});
</script>
<body>
省份：<select id="province" style="width: 90px;margin: 10px;" onchange="loadAddress($("#province").val(),根据省份id查询城市方法Path, "city", true,false,true);"></select>
城市：<select id="city" style="width: 90px;margin: 10px;" onchange="loadAddress($("#city").val(),根据城市id查询区县方法Path, "district", true,false,true);"></select>
区/县：<select id="district" style="width: 90px;margin: 10px;"></select>
</body>
</html>