二级联动的智能输入框

智能输入框的应用在我们开发过程中十分普遍，最近遇到一个需求是制作一个二级联动的智能框，智能提示的内容是从后台获取的，用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>

至此二级联动的智能输入框已经完成，仅供参考

 

转载于:https://www.cnblogs.com/vike0906/p/8622613.html