码迷,mamicode.com
首页 > 其他好文 > 详细

二级联动的智能输入框

时间:2018-03-22 12:41:41      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:success   bootstrap   选择   blog   trap   select   group   val   aac   

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

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

 

二级联动的智能输入框

标签:success   bootstrap   选择   blog   trap   select   group   val   aac   

原文地址:https://www.cnblogs.com/vike0906/p/8622613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!