使用select实现数据库动态查询

在网上看了很多的关于select动态的问题，很多人也直接说了ajax去做，但是还是有不少地方不能看明白或是很复杂，现在我整理了一下自己所做的Demo，将其中的思路整理顺通一下，数据库部分不做详解。

后台数据库查询的内容

后台查询返回的是Json格式的数据
public JsonResult UpdateDatebaseColumnTest(string DataName)
{
var Datebase = _DBHelper.GetDataBaseName();
ViewBag.getTable1 = Datebase;
System.Collections.Generic.List<SysType> tableName = new System.Collections.Generic.List<SysType>();
if (DataName != null)
{
tableName = _ListHlper.SelectTable(DataName);
ViewBag.tableName1 = tableName;
}
else
{
DataName = "stu";
tableName = _ListHlper.SelectTable(DataName);
ViewBag.tableName1 = tableName;
}

return Json(tableName, JsonRequestBehavior.AllowGet);
}

Html代码

//第一个select
<tr style="margin-top:5px;">
<td align="right">选择数据库:：</td>
<td align="left">
<span class="select-box radius" style="width:250px">
<select class="select" name="name" id="name">
@foreach (var item in ViewBag.getTable1)
{
<option value="@item.Name">@item.Name</option>
}
</select>
</span>
</td>
</tr>
//第二个select
<tr style="margin-top:15px;">
<td align="right">选择表：</td>
<td align="left">
<span class="select-box radius" style="width:250px">
<select class="select" name="tname" id="tname">
@foreach (var ite in ViewBag.tableName1)
{
<option value="@ite.Name">@ite.Name</option>
}
</select>
</span>
</td>
</tr>

jQuery代码片段

<script type="text/javascript">
$(function () {
$("#name").change(function () {
//select下拉框选值改变事件
var a = $("#name").val();
$.get("/Database/UpdateDatebaseColumnTest", { Action: "get", DataName: a }, function Success(aaa) {
//$.get("url","data数据",function Success(执行成功返回的函数))
//将第二个下拉框的值清空
$("#tname").html("");
//建立一个拼接字符串
var str = "";
//for循环，给option赋值，aaa是返回函数得到的值，
for (var i = 0; i < aaa.length; i++) {
str += "<option value=" + aaa[i].Name + ">" + aaa[i].Name + +"</option>";

9ee6
}
//重新赋值
$("#tname").html(str);
});

})
})
</script>

总结：

其实html部分和后台查询部分不用太细说，关于ajax部分才是关键，看了很多的关于ajax异步刷新，最后还是觉得$.get(“url”,data,function Success(执行成功返回的函数))最为简单一些，只要把data返回给后台，后台查到的数据序列化为Json格式，就可以重新绑定值