Jquery动态生成input标签下拉选

        <input list="datalistOption" id = "input1" value = 11>
            <datalist id="datalistOption">
            
            </datalist>

   上面是input标签实现下拉选的基本代码，如果下拉内容固定，如性别类可以直接在dataList标签中添加以下内容，将value中的内容更改即可放心食用

 <option class="option1" value="hello">

下面是使用jQuery动态生成下拉选的js代码段

$("#input1").click(function(){
	$(".option1").remove();
$(document.createElement("option"))
    .val("hello")
    .attr("class","option1")
    .appendTo($("#datalistOption"));
});

当用户点击input标签时会执行以下操作：首先删除class为option1的元素然后 生成一个新的option标签，设置值为hello，设置class为option1，最后将元素插入到id为dataListOption的元素后面。到此为止，基于以上代码段生成内容依旧称不上动态。

        接着往下改造，首先将click点击时触发改为change内容改变时触发，触发事件内首先获取当前输入框的值，然后将值传给后端进行模糊查询并返回给我们数据，获取到返回的数据后删除class为option1的所有元素，最后for循环遍历数据，重新创建option元素。