jQuery插件CascadingDropDownList

之前的项目需要实现多级联动的下拉列表选择控件,网上找了许久,没发现有太多符合需求的实现,所以自己造了个轮子,并命名为CascadingDropDownList,现将其分享出来,供大家参考。
  项目地址:https://github.com/Kidwind/jquery-cascadingDropDownList/

简介

CascadingDropDownList是一款jQuery插件,用于将一个表单元素(通常为)转换为联动的下拉选择列表,用以实现类似于省、市、县联动的下拉列表。

特点

  1. 将一个表单元素(通常为)转换为多级下拉选择列表控件的方式体现,以实现友好的选值方式,并将选择值写回表单元素。
      PS:网上找到的现成的插件多是将多个

    $("#id_area").cascadingDropDownList({ dataLoadUrl:"/loaddata", pathLoadUrl:"/loadpath" });
    

    参数说明

    参数名 默认值 说明
    selectorContainer null 所有下拉列表选择器的容器对象,如果不指定,则在表单元素后创建一个容器。
    dataLoadUrl null 下拉选择列表选项数据的加载URL地址,返回值应为[{text: "text", value: "value", childCount: 1}, ...]
    pathLoadUrl "" 根据联动下拉列表的值,获取每一级选择器所对应的选择值,返回值应为["selector1Value", "selector2Value", ..., "selectoNValue"]
    initSelectorAmount 1 初始选择器的数量
    onlySelectLeaf false 仅允许选择叶节点(如果选择的是非叶节点,则不会触发联动下拉列表值的更改)
    parentIdParmKey "pid" 加载选择器的选项值时请求dataLoadUrl时的上级选项的参数名称
    idParmKey "id" 获取每一级选择器所对应的选择值时请求pathLoadUrl的联动下拉列表的值的参数名称
    loadingText "正在加载,请稍后..." 正在加载的提示文本
    customPromptText "-请选择-" 选择器未选定任何值时的默认提示文本
    promptTexts null 每一级选择器未选定任何值时的提示文本,为一个数组对象,如:["-省-", "-市-", "-县-"]

    API接口

    方法 说明
    clearValue() 清除联动下拉选择列表的值。
    setValue(val) 设置联动下拉选择列表的值。
    val:要设置的值。
    setDataLoadUrl(url) 设置下拉选择列表选项数据的加载URL地址。
    url:要设置的下拉选择列表选项数据的加载URL地址。
    destroy() 销毁对象。

    API调用方式如下:

    $("#id_area").cascadingDropDownList("setValue", "450105");
    

你可能感兴趣的:(jQuery插件CascadingDropDownList)