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控件(这 ...
随机推荐
- 使用ajax上传文件
1. XMLHttpRequest(原生ajax) [](javascript:void(0) <input class="file" type="file&quo ...
- Git忽略文件.gitignore的使用
本博客旨在自我学习使用,如有任何疑问请及时联系博主 1.WHY? 当你使用git add .的时候有没有遇到把你不想提交的文件也添加到了缓存中去?比如项目的本地配置信息,如果你上传到Git中去其他人p ...
- Java中File类的方法详解
File类也是Java中一个比较重要的类,通过他我们可以实现对文件的一系列操作,其内置了很多方法,下面我将按方法的功能分块,逐一讲解: 快速导航 构造方法 常用方法 创建目录 判断 `is...` t ...
- Leetcode随缘刷题之寻找两个正序数组的中位数
我一上来没读清题,想着这题这么简单,直接就上手写了: package leetcode.day_12_05; import java.util.ArrayList; import java.util. ...
- MySQL语法命令之约束篇
文章目录 1.约束概述 1.1约束的分类 1.2添加约束 2.查看表中的约束 3. `not null` 非空约束 3.1 在 `create table` 时创建 3.2 在`alter table ...
- 实现基于MYSQL验证的vsftpd虚拟用户访问
一.配置mysql服务器 1.1 安装mysql # yum -y install mariadb-server # systemctl enable --now mariadb.service &a ...
- MybatisPlus字段自动填充配置
实体类 @ApiModelProperty(value = "创建时间") @TableField(fill = FieldFill.INSERT) private Date gm ...
- Wi-Fi DFS与TPC介绍
DFS与TPC是wifi认证的其中一项测试内容,如果不需要DFS功能,可以不进行测试,但是某些属于DFS频段的wifi信道则不允许使用. 1. 什么是WIFI Auto DFS? 通俗的说就是:躲雷达 ...
- for循环例子
代码 点击查看[ForTest.java]代码 //package com.d; import java.util.Scanner; /** * For循环例子 * @date: 2022.2.24 ...
- awvas启动不起来解决方案
当双击桌面的"Acunetix图标",自动打开浏览器跳转页面,结果页面显示"无法访问此网站"按Windows+R键输入services.msc打开服务界面查看A ...