Jquery-select-处理二级联动的一种简单方式

Jquery-select-处理二级联动的一种简单方式

问题背景：

页面中有很多级联数据时，处理起来很麻烦。比如我们需要处理一个城市的二级联动， 
先选择省，然后选择市。思考一下我们数据的字典的建立。 
说一种一般的处理方式 
比如广东省-深圳市，数据库一般就会有两条数据。 
但是我们使用select组件的时候 
一般会用到下面的处理

<select id="deptselect_id" name="provice">
     <option value="">选择部门</option>
     <c:forEach var="t" items="${provices}">
         <option value="${t.value}">${t.value}</option>
     </c:forEach>
</select>

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

获取select的value，然后ajax,根据类型是省份的记录然后值还是t.value来做一个简易的条件查询。

 $("#deptselect_id").change(function () {
    var selectEl = $(this);
    var selectValue = selectEl.val();
 });

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

但是要注意的是，你这里是以t.value作为条件，一个很痛心的情况发生了，value可能重复，也许你会说我加上限制条件， 
好的，没有问题， 
比如我们现在有十几组这样的数据，那么你要多写多少sql

也许一个更聪明的会说:”NO,NO，只需要一条sql，传值得时候加上类型”

ok ，我没话说

但是我要说是，个人认为一个比较简单的方式。

ajax的时候我们不传递类型，我们传递Id；就是t.value这条记录的主键。

在这里一个问题产生了，select的赋值问题。我们可以根据select组件的id获得select的值，但是这个值是option 的value值。这个是我们要传递的到后台的数据，不能动啊！ 
没问题，我们加一个属性。

<select id="deptselect_id" name="provice">
     <option value="">选择部门</option>
     <c:forEach var="t" items="${provices}">
         <option data-id=${t.id} value="${t.value}">${t.value}</option>
     </c:forEach>
</select>

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

对只给option 增加一个data-id属性然后将主键t.id赋给它

那么我们怎么取值呢？

 $("#deptselect_id").change(function () {
    var selectEl = $(this);  
    //给新手解释一下$(this)=$("#deptselect_id")。(解释不一定正确)
    var selectValue = selectEl.val();
    var index = selectEl[0].selectedIndex;
    var selectOption = selectEl[0].options[index];
    var dataId = $(selectOption).attr("data-id");
    console.log(dataId);
    //dataId 就是我们要的主键Id
 });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

这样的话是不是简单很多，一般级联的数据都存在一个”PID”的东西，这样的话是不是简单很多？

hibernate 有个自关联的概念，可以试试 
mybits的话，自己写sql也能搞定吧！

其实没啥，啰嗦这么多就是在ajax传的时候不再是傻傻的只传option 的value值，我们要传递的是id是主键。

来自 http://blog.csdn.net/u010162887/article/details/52639751