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. Promise、Generator、Async有什么区别?

    前言 我们知道Promise与Async/await函数都是用来解决JavaScript中的异步问题的,从最开始的回调函数处理异步,到Promise处理异步,到Generator处理异步,再到Asyn ...

  2. 浅谈C#可变参数params

    前言 前几天在群里看到群友写了一个基础框架,其中设计到关于同一个词语可以添加多个近义词的一个场景.当时群友的设计是类似字典的设计,直接添加k-v的操作,本人看到后思考了一下觉得使用c#中的params ...

  3. 「NOI十联测」反函数

    30pts 令(为1,)为-1: 暴力枚举每个点为起始点的路径,一条路径是合法的当且仅当路径权值和为0且路径上没有出现过负数. 将所有答案算出. 100pts 使用点分治. 要求知道经过重心root的 ...

  4. OC和JS代码的互调

    01 OC调用JS的代码 NSString *str = [self.webView stringByEvaluatingJavaScriptFromString:@"sum()" ...

  5. js 对象的深克隆

    前端笔试或者面试的时候,很喜欢问的一个问题就是对象的深度克隆,或者说是对象的深度复制.其实这个问题说容易很容易,但是要说全面也挺不易. 要弄明白对象的克隆,首先要明白js中对象的组成.在js中一切实例 ...

  6. The official raywenderlich.com Objective-C style guide.

    The official raywenderlich.com Objective-C style guide. This style guide outlines the coding convent ...

  7. 有手就行2——持续集成环境—Jenkins安装、插件、用户权限及凭证管理

    有手就行2--持续集成环境-Jenkins安装.插件.权限及凭证管理 持续集成环境(1)-Jenkins安装 持续集成环境(2)-Jenkins插件管理 持续集成环境(3)-Jenkins用户权限管理 ...

  8. 人工智能与智能系统3-> 机器人学3 | 移动机器人平台

    机器人学的基本工具已经了解完毕,现在开始了解移动机器人,这部分包括机器人平台.导航.定位. 所谓机器人平台就是指机器人的物理结构及其驱动方式.本文将学习两种典型移动机器人平台(四旋翼和轮式车)的运动与 ...

  9. HTML基础笔记整理

    「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路.有人说:"再次翻开笔记是什么感觉",我的回答是:"初恋般的感觉". ...

  10. 微服务从代码到k8s部署应有尽有系列(一)

    从本篇文章开始,我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 实战项目地址:https://github.com/Mikaelemmmm/go-zer ...