智能输入框的应用在我们开发过程中十分普遍，最近遇到一个需求是制作一个二级联动的智能框，智能提示的内容是从后台获取的，用easyUi的combobox就可以完成，不过后来感觉用起来比较麻烦，就自己基于JQuery写了一个，分享一下
1.两个select输入框:
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">一级智能输入框：</label> <div class="col-sm-10"> <select id="aa" class="form-control" style="width: 300px;" onchange="aachange()"> <option value="aaa">请选择a</option> </select> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label" >二级智能输入框：</label> <div class="col-sm-10"> <select id="bb" class="form-control" style="width: 300px;"> <option value="bbb">请选择</option> </select> </div> </div> </form>
为了好看点用的bootstrap框架
2.两个输入框初始化，为它们添加option:
<script type="text/javascript"> $(function(){ var sa=$("#aa"); var sb=$("#bb"); $.ajax({ url:‘json/forSelectAA.json‘, type:‘POST‘, //GET async:true, timeout:5000, dataType:‘json‘, success:function(result){ var aa=result; for (var i = 0; i < aa.length; i++) { var varItem = new Option(aa[i].value, aa[i].TEXT); sa.options.add(varItem); } } }); $.ajax({ url:‘json/forSelectBB.json‘, type:‘POST‘, //GET async:true, timeout:5000, dataType:‘json‘, success:function(result){ var bb=result; for (var i = 0; i < aa.length; i++) { var varItem = new Option(aa[i].value, aa[i].TEXT); sb.options.add(varItem); } } }); });
</script>
3.在一级输入框值发生变化时改变二级输入框的提示内容吗，使其成为二级联动：
<script type="text/javascript">
function aachange(){
var selectValue = $("#aa").val();
var sb=$("#bb");
console.log(selectValue);
$.ajax({
url:‘json/forSelectBB.json‘,
type:‘POST‘, //GET
data:selectValue,
async:true,
timeout:5000,
dataType:‘json‘,
success:function(result){
var bb=result;
for (var i = 0; i < aa.length; i++) {
var varItem = new Option(aa[i].value, aa[i].TEXT);
sb.options.add(varItem);
}
}
});
}
</script>
至此二级联动的智能输入框已经完成，仅供参考
