下拉框可以输入

最新推荐文章于 2024-09-13 21:58:54 发布

竖心旁的情

最新推荐文章于 2024-09-13 21:58:54 发布

阅读量846

点赞数

分类专栏：前端文章标签：下拉框输入 select2 jquery-edi

本文链接：https://blog.csdn.net/wu_0916/article/details/76726691

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.效果图
这里写图片描述

2.实现方法
*方法1：*select选择框控件-jquery.editable-select

<select id="editableTest">
    <option value="1">aaa1 Romeo</option>
    <option value="2">aaa2</option>
    <option value="3">aaa3</option>
    <option value="4">aaa4</option>
</select>
js:
$('#editableTest').editableSelect();

方法2：select2（更加强大的方法）
大牛博客：http://www.cnblogs.com/landeanfen/p/5099332.html
官方地址：https://select2.github.io/examples.html
本人方法：

<select id="selectAA" class="js-data-example-ajax form-control" style="width: 200px;"  >
                        <optgroup  label="名字" id="Name">
                            <option value="ALL" >全部同学</option>
                        </optgroup>
                    </select>
js:
$("#selectAA").select2(); 
    /*给下拉框赋值*/
    function getTONGXUE(){
        $.ajax({
            type:'post',
            data:'',
            url:'xxxxx',
            success:function(result){
                var data=eval("("+result+")");
                var str="";
                if(data!=null && data!=undefined){
                    for(var i=0;i<data.length;i++){
                        str+="<option value="+data[i].Age+">"+data[i].Name+"</option>";
                    }
                }
                $("#Name").append(str);
            }
        });
    }