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。
});
}
如果帮到你的话,请留言支持一下,小菜鸟会很开心的;如果哪里有不正确的地方请指正,与君共勉。