Input+Selcet（Input触发ajax，Select动态添加Option）

项目要求输入日期后，下拉框可以选择姓名，然后一起提交。

input框选择日期（type="date"）IE浏览器不支持此选项，后跟Select下拉框有符合日期的选项

一开始下拉框为空，选择日期后，下拉框出现姓名。点击提交后，日期和姓名将一起提交。

————————————————————————————————————————————————————

1.现在将贴出form代码

<form class="navbar-form navbar-left" role="search" method="post" action="" id="submitsort">
           <div class="form-group" >
               <input type="date" name="date" id="da" class="form-control">
               <select class="form-control" form="submitsort" name="patient_name" id="sort">
               </select> //form表示将select绑定id为submitsort的表单，随它一起提交，差不多成为一个input
           </div>
           <button type="submit" class="btn btn-success">查询</button>
   </form>

————————————————————————————————————————————————————————

2.给 <input type="date" name="date" id="da" class="form-control">添加事件

var da = document.getElementById("da");
da.oninput = function(){

//oninput事件表示input框内value值发生变化触发，因为我的是直接选择日期，所以不需要监听用户是否输完，

//点击后选择日期就表明选择完毕，这时向后台发送ajax请求，下面我用的是jquery的ajax，我本来是想用原生的，

//但后台要求我用jquery，所以ajax就用了下jquery，其它js代码都是原生js。
   var dates = da.value;//获取type=date的input框的value值
   $.ajax({
               type: "POST",
               url: "（后台API）",
               data: {'dates':dates},//将values传到后台
               success: function(data)
               { var res = JSON.parse(data);//解码
                   console.log("返回的数据",res);

                   var arr = Object.values(res);//将值加入到数字arr
                   const array = [...new Set(arr)];//arr数组去重,es6中的Set数据结构，Set类似数组，但是里面的值不重复，

//正好可以用来数组去重，扩充Array.from()方法可以将Set结构转换为数组，Array.from(new Set(array)

console.log(array);
var len = array.length;//获取数组的长度

                   if(res.message){alert(res.message);}//没有查找到病人
               else{
               var oSelect = document.getElementById("sort");
               for(var i = 0;i<len;i++)
               {
               oSelect.add(new Option(array[i],array[i]));//添加option
// console.log(Object.getOwnPropertyNames(oSelect).length);
               }

               },//后台成功返回数据后进行的操作
               // error:function(jqXHR, textStatus, errorThrown){
               //    console.log("jqXHR.responseText",jqXHR.responseText);
               //    console.log("jqXHR.status",jqXHR.status);
               //    console.log("jqXHR.readyState",jqXHR.readyState);
               // }为什么会有error方法，那是因为当时一直获取不到后台的数据，所以引error调试，发现返回

//的readystatus==4，status==200,说明前后端是通的；所以当时一直疑惑，后来发现后台返回的数据格式有问题，

//后台是php写的，后来采取了正确的格式echo json_encode((object)$arr);这时候前台就可以正常接受数据，

//并将option添加到select。
});
}

如果帮到你的话，请留言支持一下，小菜鸟会很开心的；如果哪里有不正确的地方请指正，与君共勉。

Input+Selcet（Input触发ajax，Select动态添加Option）

猜你喜欢