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. Java线程--Semaphore使用

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11872132.html Java线程--Semaphore使用 Semaphore是信号量, ...

  2. Oracle 获取表注释和列注释

    全部表 select table_name from user_tables; //当前用户拥有的表 select table_name from all_tables; //所有用户的表 selec ...

  3. 6 小时 Python 入门

    6 小时 Python 入门 以下操作均在 Windows 环境下进行操作,先说明一下哈 一.安装 Python 1.官网下载 Python 进入官网(https://www.python.org), ...

  4. 大话PHP设计模式笔记

    针对PHP的设计模式进行总结记录. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻 ...

  5. Solution -「LOJ #6053」简单的函数

    \(\mathcal{Description}\)   Link.   积性函数 \(f\) 满足 \(f(p^c)=p\oplus c~(p\in\mathbb P,c\in\mathbb N_+) ...

  6. pytest(10)-常用执行参数说明

    pytest单元测试框架中可以使用命令行及代码pytest.main()两种方式执行测试,且可以加入各种参数来组织执行测试.接下来我们来了解常用的执行参数的含义及其用法. pytest中的执行参数根据 ...

  7. 如何强制关闭Win10自动更新

    今天我向往常一样打开了电脑,在工作时突然感觉CPU风扇嗡嗡的响电脑开始变得极慢内存也开始上涨,我意识到不妙了,Windows10 又开始在后台给我搞事情了,由于我的电脑安装有开机还原功能,所以每次开机 ...

  8. netty系列之:channel,ServerChannel和netty中的实现

    目录 简介 channel和ServerChannel netty中channel的实现 AbstractChannel和AbstractServerChannel LocalChannel和Loca ...

  9. 新手菜菜之2020Kubernetes详细介绍大全

    前文 Kubernetes笔记(一):十分钟布置一套K8s环境 介绍了怎么快速建立一个k8s体系.为了持续运用k8s来布置咱们的应用,需要先对k8s中的一些根本组件与概念有个了解. Kubernete ...

  10. docker迁移工作目录

    yum安装的docker 工作目录在系统盘,迁移到数据盘 首先需要停止docker服务 systemctl stop docker.service 通过命令df -h 先去看下磁盘大概的情况,找一个大 ...