关于下拉框的绑定

在日常的上网生活中下拉框是随处可见的了，那么下拉框是如何实现的呢。今天就给大家分享一下我对下拉框的理解。
代码可以说是非常简单的了。只要在页面加载的时候就运行下面的代码，一个下拉框的基本样子就存在了。
function append() {
$.getJSON("/Safety/SafetyCheck/Inspector", function (data) {
$.each(data, function (i) {
$("#Security").append(’’ + data[i].text + ‘’);
})
})
}
控制器的查询方法：我列了两种查询的方法
public ActionResult Inspector()
{
一、 var SecurityInspector = from tb in myModel.S_UserType
select new
{
id = tb.UserTypeID,
text = tb.Security
};
二、 var Secur = myModel.S_UserType.Select(m => new { id = m.UserTypeID, text = m.Security });
return Json(SecurityInspector, JsonRequestBehavior.AllowGet);
}
现在方法有了，就是不知道效果如何。现在我就给大家看一下上面代码运行起来的效果是怎么样的吧。下面看图

事实证明这样是可以实现下拉效果的，看起来也很不错。但是就这样可能会出现一些问题，例如我遇到过的：请选择项会丢失，就是请选择这一行不出来了。还有就是选项叠加，既是选一号的时候文本框内不会清空，再选二号的时候就是一号与二号拼接在一起了，如此叠加起来。要解决也容易就是加上两句代码就可以了。如果她不清空我就自己给他清空，如果请选择不出来我们就自己给他加上去。
$("#Security").empty();//清空
$("#Security").append(’—请选择—’);//添加
如果你还想利用下拉框对其他的下拉框进行操作，也可以。例如：选择地址，必须要先选择省才能选择市然后才能选择区这样要怎么实现呢？
就是先不给第二个下拉框绑定数据，获取到第一个下拉框的ID检测它的改变事件后。再根据第一个下拉框的ID的数据绑定第二个下拉框如此类推。最后的清空是因为二次选择时防止出现错误的。既是第一次全部选完了，然后第一个又不选了，这样第二个会变回不绑定的状态，但是第三个是不会变回的，所以人为给它清空。因为数据执行顺序的原因，所以第一个下拉框放最后。这次的下拉框分享就到这里结束了。下面请欣赏上述内容的代码。
function loadSearchSelect() {
$("#OneID").change(function () {
获取选中的第一个ID
var oneId = $("#OneID").val();
绑定第二下拉框数据
createSelect(“twoID”, “连接拼参数);下拉框封装好的方法
当重新选择第一个的时候，第三个下拉框需要清空，
等第二个信息绑定的时候再绑定第三个的数据
$(”#threeID").empty();
});
第二个下拉框数据绑定，触发第三个下拉框数据绑定
$("# twoID “).change(function () {
获取选中的年级ID
var twoId= $(”# twoID ").val();
第三个下拉框数据绑定
createSelect(“threeID”, "连接拼参数);下拉框封装好的方法
});
第一个下拉框绑定
createSelect(“oneID”, "连接拼参数);下拉框封装好的方法
}