任意多级联动JS组件

代码下载

你可以从这里下载完整的代码associate_select.rar,该组件依赖Prototype 1.4框架。

组件特征

• 用于单级选单或任意多级下拉选单
• 使用ajax加载选单数据
• 使用xml文件传输数据，格式如下：（因为比较简单故没有dtd） <?xml version="1.0" encoding="UTF-8" ?>
  <selectChoice>
    <entry>
     <optionText>江苏省</optionText>
     <optionValue>1</optionValue>
    </entry>
    <entry>
     <optionText>上海市</optionText>
     <optionValue>2</optionValue>
    </entry>
  </selectChoice>
  

声明

你可以自由的在任何项目中使用该组件，但必须保留js文件中的声明。如果你需要修改或发现bug，那么请您发送邮件到jimichan@gmail.com，并随信寄来修改后的代码和说明。 本说明页面未经过本人同意不得转载，但你可以链接到该文档。

API介绍

  多级联动包含两个类 SelectBase 和 AssociateSelect。 SelectBase表示联动的第一级，AssociateSelect表示被联动的后续多级的类。

类 SelectBase的构造函数签名为:SelectBase(sSelectId,sLoadUrl,sChangeUrl)

• sSelectId: 必填，对应html的select标签的ID
• sLoadUrl: 必填，该Select的数据来源的URL(数据格式是以上提供的xml格式的数据，可由服务器端动态产生)
• sChangeUrl: 不必填，该Select发生change事件时,将请求该URL的xml数据来填充下一级的Select的选项（如果存在下一级）。 该属性不必填，不指定该参数则使用sLoadUrl的值。

    注(URL自动绑定的特定的参数)：之所以sLoadUrl能和sChangeUrl公用一个URL是因为在使用ajax发送请求是会在url后面加上status参数。
例如,sLoadUrl为http://localhost/bar/foo.do，那么发送则为http://localhost/bar/foo.do?status=load，那么发送sChangeUrl 的时候则为http://localhost/bar/foo.do?status=change
    在两种URL上都会增加如下参数，在服务器端你可以根据这些参数来产生所需的xml

• selectedValue：发送请求下拉选单的
• selectedName：
• formName：

方法和属性
  方法： void load（）;//启动联动选单
         void addRelation(AssociateSelect as);增加级联选单，可多次调用，调用的顺序也表示级联选单的顺序
  属性： single// 让级联选单工作在单一模式下，在下面的例子中我们将详细描述该属性

• sSelectId: 必填，对应html的select标签的ID
• sChangeUrl: 不必填，该Select发生change事件时,将请求该URL的xml数据来填充下一级的Select的选项（如果存在下一级）。 该属性不必填，不指定此参数则使用对应SelectBase的sLoadUrl的值。

HTLM自定义属性

对Select的标签增加了cv属性。表示当前select的哪个option处于被选中状态，处于选中状态option 的value和cv属性的值相等。 <select cv='5'>
  <option value="-1>";请选择</option>
</select> 该属性在编辑页面中恢复多级联动的选单状态很有用。

使用示例

示例一： 1级选单
   xml为as_ex1.xml，当然在实际应用中它可以是服务器中的产生xml的URL <form name="bar">
   <select id="ex1">
    <option value="-1>";请选择</option>
  </select>
</form>
<script type="text/javascript">
  var ex1sb = new SelectBind('ex1','as_ex1.xml');
  ex1sb.load();
</script>
示例二： 多级选单
该示例中使用唯一的URL as_ex2.action 来生成xml，那么在服务器程序中将通过URL自动绑定的特定的参数来做出正确的行为。 <form name="bar">
 <select id="ex2">
   <option value="-1>";请选择</option>
 </select>
 <select id="ex3">
   <option value="-1>";请选择</option>
 </select>
 <select id="ex4">
   <option value="-1>";请选择</option>
 </select>
</form>
<script type="text/javascript">
 var ex1sb = new SelectBind('ex2','as_ex2.action');
 ex1sb.addRelation(new AssociateSelect('ex3'));
 ex1sb.addRelation(new AssociateSelect('ex4'));
 ex1sb.load();
</script>
示例三： 多级选单 & 单一模式
该示例与 示例二 一样，不过多了个特殊的需求，把多级选单看作是一个整体，需要取得多级选单的最后一级的有效选择值。
single属性的值是一个Object，包含name属性和fillSelects属性。
name是个字符串，它和对应的hidden字段的Id是相等的。
fillSelects是指向一个Function。在页面加载的时候，会将传入的hidden字段的value，然后你可以像示例三中的fillSelectsImpl 那样根据你的规则来设置select的cv属性，那么就可以根据hidden的值来恢复多级选单的状态。 <form name="bar">
   <select id="ex5">
    <option value="-1>";请选择</option>
   </select>
   <select id="ex6">
    <option value="-1>";请选择</option>
   </select>
   
   <input type="hidden" id="targerId"/>
</form>
<script type="text/javascript">   
 var ex1sb = new SelectBind('ex5','as_ex3.action');
 ex1sb.addRelation(new AssociateSelect('ex5'))
 ex1sb.single = {name:'targerId',fillSelects:fillSelectsImpl}
 ex1sb.load();
 
 function fillSelectsImpl(value){
  if(value){
   
   var length = value.length; 
       if(length<=2){    
     $('ex5').setAttribute('cv',value);
   }else{
    $('ex5').setAttribute('cv',value.substring(0,1))
    $('ex6').setAttribute('cv',value) 
   }
  } 
 }
</script>