下拉框数据多条件查询

                                   下拉框数据多条件查询

在我们做的项目的过程中我们往往是要面对众多的不同的数据，那么我们应该如何去处理这众多的数据，以及给用户好的用户体验呢？
我们要想能够成为一名合格的程序员，那么我们就要懂得把众多的数据分类摆放整齐，井然有序的呈现在用户的面前，但光是有序的呈现出来还是不够的，我们还要能让用户如果想要搜索某条重要的数据时，要有一个功能快速的根据关键信息在第一时间找到这一条数据。
如此，我们就要用到我们的下拉框数据快速搜索功能。只要输入特定的关键字，或其中所包含的特殊字眼，便能帮助我们快速查找到我们想要的数据。那么这种下拉框数据快速搜索功能是怎么实现的呢：第一步当然是我们的HTML布局了，无论我们是做什么功能都必然要按照一定的HTML布局来帮助我们达成我们想要的目的。

如图中所示：我一次创建了一个搜索框以及三个下拉框，而我在每一个下拉框的组成都是label标签后再加一个

标签，然后再在这个

标签中放置一个标签来创建下拉框，标签是可以在如今的所有的主流浏览器中都可以使用的，不会出现浏览器不支持的状况，而且select元素可创建单选或多选菜单，select元素中的< option >标签就是用于定义下拉框列表中的可用选项的。而我们要做的下拉框数据快速搜索功能就是把下拉框的< option >标签与数据库中的数据绑定，从而把数据库中的数据放到下拉框之中去，如此来实现下拉框数据快速搜索功能。
第二步，我们就要开始创建添加下拉框的数据，首先我们就要使用jquery插件根据URL创建下
拉框。如此我们可以现行创建一个方法，方便我们后面去创建下拉框以及创建标签下的

标签，还能帮助我们快速的把数据库查询出来的数据分别放入到标签下的标签之中，如此我们也可以在后面不断地去重复使用，而不用在后面不断地去写重复的代码，如此也减少了很多不必要的工作。  如图中所示：这是我引用的一个别人封装好的一个专门创建这种下拉框的方法，如此我们只要在写jQuery代码的时候直接就可以使用了。  接下来我们就要开始绑定下拉框，然后在控制器中去查询下拉框的数据，在查询到下拉框中的数据之后便是把这些数据放入到已经定好的下来框之中。 首先是绑定第一个下拉框，数据的查询是非常简单的，我们只要声明一个变量去找到Mode中相对应的表格记好了，而在这里我为了能更好地显示而创建了这样的一个类，其中的id 代表的是选中值；text 代表的是在页面上的显示的值。  如图中所示：我们在查询出数据之后还要将它转化为列表，并且在第一项上添加上“---请选择---”的选项如此第一个下拉框便完成了。 接下来的下拉框便要根据第一个下拉框的改变而改变，如此便要先获取到第一个下拉框的选中的值，然后再根据前一个下拉框的选中的值去查询下一下拉框所要显示的值。  如图中所示：我们要为前一个下拉框写（change）改变事件，在前下拉框发生改变的时候去获取到它的选中的值。然后再拼接上前下拉框数据的ID让下个下拉框能够得到前一个下拉框变化的数据。 那么接下来就是下一次的查询会，这一次还要在前一个下拉框的基础上去查询与它相对应的数据，因此我们要在查询的时候加上前一个下拉框的数据的ID，根据ID查询数据。如下图所示  在图中我们可以看到我在前面加上了一个ID，那么我们接下来的数据就要根据这个ID区查询，才能做到下一个下拉框根据前一个下拉框的改变而改变。如今我们已经完成了两个下拉矿的数据的绑定，而第三个下拉框还要判断前面的下拉框是否为空，如果有其中一个或都为空那么第三个下拉框就要为空。 我们先要与HTML布局的下拉框绑定，然后再去判断查询的数据。再为它写一个根据前面两个下拉框的改变而改变的change的改变事件。  在最后一个下拉框我们也要获取到它得前面的两个下拉框的数据的ID，获取到他们如今的数据，再根据它们的数据去查询数据。如下图所示：  我们从图中就可以看到，我在图中便已经对前面的两个下拉框进行了一轮判断，我们在查询第三个下拉框之前必须保证前面的两个下拉框是有数据的，而不能有一个下拉框为空。如此我们才能查询。  在保证前面的两个下拉框是有数据之后，我们就能完成第三个下拉框的数据的查询，并且按照前面的一样拼接上“---请选择---”的选项如此最后一个下拉框便完成了。 再JS代码这边，我们还要获取到页面上下拉框的数据，然后再进行查询，并且在查询完之后还要重新载入表单。在这里我们判断下拉框的数据是否为空。  最后，我们只要在控制器中在为这些下拉框再添加一段多条件查询的代码，就可以完成页面上下拉框多条件查询的功能。  我们要想使用这一段条件筛选，还必须要在开始时就声明三个ID去接收下拉框传过来的数据，再在这里查询到我们想要的数据。 如此我们在众多的数据中就可以快速的查询到我们所需要的数据了。如图中所示：我们只要在三个下拉框中输入你想要的数据，那么就能够快速的查找到你要的数据。