html: 设置页面改变事件

<div id="show">

 <div class="page-container" style="width: 300px">
<label >科室下拉搜索</label>
<div>
<select name="interest" id="serarch" onchange="serch()" class="input-text" >
<option value="老年人套餐">老年人套餐</option>
<option value="儿童套餐">儿童套餐</option>
</select>
</div>
</div>

</div>

引入jq,触发Ajax

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript"> function serch() {
// 获取下拉框的分类值
var value=$('#serarch').val();
//发送值
$.ajax({
"url":"/package/serarch",
"data":{value},
'dataType':'json',
"type":"POST",
success:function (res) {
console.log(res)
if (res.code==200){
var data = res.data;
var str="<table>";
str += "<th>ID</th>";
str += "<th>套餐名称</th>";
str += "<th>套餐类型</th>";
str += "<th>适用院区</th>";
str += "<th>套餐价格</th>";
str += "<th>套餐项目</th>";
str += "<th>操作</th>";
for (var i=0;i<data.length;i++){
str +="<tr><td>"+data[i].id+"</td><td>"+data[i].Package_name+"</td><td>"+data[i].type+"</td><td>"+data[i].yuan+"</td><td>"+data[i].price+"</td><td>"+data[i].price+"</td><td>"+data[i].project+"</td></tr>"
}
str+="</table>";
$("#show").html(str);
$("tr:odd").css('background-color','');
$("tr:even").css('background-color','');
$("tr:eq(0)").css('background-color','');
$("table").css('border','1px solid red');
}
}
}) } </script>

设定路由

//下拉搜索
Route::post('package/serarch','PackageController@serarch');

控制器:

    public function serarch(Request $request){
// 接受值
$data=$request->post('value');
// 进行查询
$res=Package::where('type',"=","$data")->get();
// 返回结果
return ['code'=>200,'data'=>$res,'msg'=>'success'];
}

效果图

laravel7 jqAjax下拉框搜索的更多相关文章

  1. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  2. 下拉框搜索插件chosen

    {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  4. BootStrap下拉框搜索功能

    <!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...

  5. DataTables给每一列添加下拉框搜索

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...

  6. 让Jayrock插上翅膀(加入输入输出参数注释,测试页面有注释,下拉框可以搜索)

    继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...

  7. 下拉框click事件与搜索框blur事件的爱恨纠葛

    还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...

  8. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  9. 多选下拉框带搜索(aps.net)

    自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...

随机推荐

  1. Thread中常用API

    1.sleep方法 线程的 sleep 方法会使线程休眠指定的时间长度.休眠的意思是,当前逻辑执行到此不再继续执行,而是等待指定的时间.但在这段时间内,该线程持有的锁并不会释放.这样设计很好理解,因为 ...

  2. Nginx 配置 HTTPS 服务器

    Nginx 配置 HTTPS 服务器 Chrome 浏览器地址栏标志着 HTTPS 的绿色小锁头从心理层面上可以给用户专业安全的心理暗示,本文简单总结一下如何在 Nginx 配置 HTTPS 服务器, ...

  3. PHP版的猴子选大王算法

    猴子选大王 这个算法可能是目前我看到的最简洁都算法吧,而且很好理解.它不同于其他算法,其他算法都是判断这个猴子能不能被选中,而他只是找出不能被选中的猴子,然后将其塞到数组模拟的环状队列中,参与下次选. ...

  4. iOS 获取通讯录中联系人的所有属性 by - zfqj

    1 ABAddressBookRef addressBook = ABAddressBookCreate(); 2 3 CFArrayRef results = ABAddressBookCopyAr ...

  5. iOS开发笔记,简单实现视频音频的边下边播

    总是在网上看别人的博文,受益匪浅,从没自己写过,今天分享一点小经验,第一次写技术博客,希望对同行的ios猿们有所帮助.   先介绍一下自己的情况:一年ios开发,http协议不太懂,大约知道断点下载h ...

  6. Java经典案例之用三种方法求1~100以内素数之和

    素数,不能被除了1和本身以外整除的数被称为素数.接下来我用三种方式求得1~100以内素数. 方式一 外层每循环一次,内层就计算出这个数有几个因子,我们都知道素数的因子只有两个,所以如果个数为2就加进总 ...

  7. linux_12

    一.主从复制及主主复制的实现 主从复制 master配置 # yum -y install mysql-server # systemctl enable --now # vim /etc/my.cn ...

  8. Feign 动态URL 解决记录

    Feign中使用动态URL请求 (应当是spring-cloud-starter-openfeign,不知道和一般的feign有何差别) 在spring项目下,假设有这样个Feign的消费接口,原来写 ...

  9. Solution -「多校联训」古老的序列问题

    \(\mathcal{Description}\)   Link.   给定序列 \(\{a_n\}\),和 \(q\) 次形如 \([L,R]\) 的询问,每次回答 \[\sum_{[l,r]\su ...

  10. Django中ORM创建表关系

    一:django中ORM创建表关系 ORM创建外键关系 1.表与表之间的关系 1.表与表之间的关系 一对多 一对一 多对多 2.操作目标条件: 图书表 出版社表 作者表 作者详情表 3.外键关联 一对 ...