laravel7 jqAjax下拉框搜索
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下拉框搜索的更多相关文章
- 原生javascript实现 下拉框搜索功能
由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...
- 下拉框搜索插件chosen
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 使用jquery select2实现下拉框搜索功能
由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...
- BootStrap下拉框搜索功能
<!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...
- DataTables给每一列添加下拉框搜索
$(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...
- 让Jayrock插上翅膀(加入输入输出参数注释,测试页面有注释,下拉框可以搜索)
继上一篇文章介绍了Jayrock组件开发接口的具体步骤和优缺点之后,今天给大家带来的就是,如何修复这些缺点. 首先来回顾一下修复的缺点有哪些: 1.每个接口的只能写大概的注释,不能分开来写,如接口的主 ...
- 下拉框click事件与搜索框blur事件的爱恨纠葛
还原车祸现场 功能类似于百度搜索,搜索框输入内容,下拉框显示候选项,点击候选项就选择候选项,然后下拉框隐藏,点击外面就直接隐藏下拉框,于是我写了以下代码 //参会单位联想 $('input[name= ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- 多选下拉框带搜索(aps.net)
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...
随机推荐
- bom-setTimeout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS 学习资料Blog 技术论坛等,不断添加中。。。。
iOS 学习资料整理 http://www.jianshu.com/p/dc81698a873c 中文 iOS/Mac 开发博客列表 https://github.com/tangqiaobo ...
- Linux远程访问及控制
Linux远程访问及控制 目录 Linux远程访问及控制 一.SSH远程管理 1. SSH远程管理概述 2. OpenSSH概述 3. 配置OpenSSH服务端 4. sshd服务的验证方式 5. 使 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- Solution -「JOISC 2021」「LOJ #3489」饮食区
\(\mathcal{Description}\) Link. 呐--不想概括题意,自己去读叭~ \(\mathcal{Solution}\) 如果仅有 1. 3. 操作,能不能做? ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第00章 - 环境准备
文章目录 0.环境准备 0.0.修改主机名 0.1.添加hosts解析 0.2.配置ssh免密 0.3.发送hosts解析文件到其他节点,并修改hostname 0.4.更新PATH变量 0.5.安装 ...
- CTO(技术总监)平时都在做些什么?
目前创业,最后一家公司任职医疗科技公司的研发中心总经理,之前也在几家公司的任职研发/技术总监岗位,在我理解的范围,目前国内中小企业对于CTO/技术总监的岗位区别没有那么明确的职能区分. 1. 先总结 ...
- Vue2.0源码学习(6) - 组件注册
组件注册 前言 在 Vue.js 中,除了它内置的组件如 keep-alive.component.transition.transition-group 等,其它用户自定义组件在使用前必须注册.在开 ...
- 017 Linux 之啥是 ssh ?
1 什么是 ssh?有什么用? (1)ssh 是一种协议 SSH(Secure Shell) 是较可靠,专为远程登录会话和其他网络服务提供安全性的协议,利用 SSH 协议可以有效防止远程管理过程中的信 ...
- 零基础小白也能用的商业智能BI工具,自助式就是香!
随着数字化时代的到来,数据已经成为企业无形的资源,企业对员工的数据分析能力也提出了新的要求.掌握一定的数据分析能力无疑会大大增加自己在职场中的竞争力,但并不是所有人都具备专业的数据分析基础,尤其是虽 ...