N级级联下拉列表 的实现思路

 

所谓N级级联下拉列表，就是由多个选择下拉列表组成的一组用来展示/选择某种信息的组件。

举个例子：

我们想选择中国的某个县，那么我们先会选择省，这时被选中的“省”的所有地市就应该被列出来了；这时我们选择一个地市，那么同样此时被选中的地市的所有县就会被列出来了。然后我们就可以选到我们需要的县了。

其实这个组件有一个更好的替代方法，那就是树结构。我认为以树的形式展示会更好写。

先不管它有没有存在的价值，反正我已经写完了，是那种利用ajax写的那种动态读取接连信息的。

好风以前还写了一棵树结构的选择组件，但不是动态的读取数据，是一次性的读取。还不大完善，以后争取完善吧（能够做成动态读取的就好了……）。

 

先说一下我的思路，

思路很简单：

1 有数据就必须有查询，那么查询语句存放在什么地方？当然是服务器端了，我用的是xml进行配置。

 有查询就必须有参数，参数我也是在配置文件中配置的；

2 既然用到了ajax,那么就不可能没有脚本，这个组件中的脚本部分很简单，根据改变的option的值以及所属selector的序号向服务器端发送查询请求，然后将查询到的值填充到各个selector中去。

3 服务器端有点复杂：首先得分析配置文件吧？然后根据传递进来的查询参数（可选的）组织查询语句，并返回查询结果；然后进行下一级数据的查询，直到最底层。最后将数据统一起来返回给客户端。

 

实现：

实现起来没什么难的地方，就是麻烦些。

看一下配置文件：

< mutiSelect-mapping >

    < params >

        < param name = "param1" />

    </ params >

  

    < selector serialNum = "0" >

        < sql >

        SELECT m.value as value,m.name as label FROM mutitest m where m.fid='null' and m.id=':::param1: '

        </ sql >

    </ selector >

    < selector serialNum = "1" >

        < sql >

           SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::0::'

         </ sql >

    </ selector >

    < selector serialNum = "2" >

        < sql >

           SELECT m.value as value,m.name as label FROM mutitest m where m.fid='::1::'

        </ sql >

    </ selector >

</ mutiSelect-mapping >

其实看过配置文件后，我的开发思路基本上就很明了了。