jQuery ajax 基于父类别的无限动态选择框

2024-04-25

我有一个类别表:

| category_id | category_name | parent_id
| 1           | Electronics   | 0
| 2           | Mobile Phones | 1
| 3           | Computers     | 1
| 4           | Iphone        | 2
| 5           | Samsung Galaxy| 2
| 6           | Asus Laptop   | 3

所以这个表能够为父类别存储无限的子类别。

现在我想要实现的是,假设我选择电子产品,那么另一个选择框应该出现并带有值列表Mobile Phones and Computers。 然后如果我选择Computers,另一个选择框将出现,并带有值列表Asus Laptop.

我知道如何编写动态选择框的代码,但它不适用于无限的子类别。

这个应该像这样工作(根据我的想法)。

  1. 用户从第一个选择框中选择一个类别
  2. 发送ajax到getcategory.php
  3. getcategory.php 查找用户选择的第一个类别中是否有任何子类别。
  4. ajax从getcategory.php接收数据
  5. 如果数据存在,jQuery 创建一个新的选择框并将获取的数据放入其中。
  6. 用户从刚刚添加的选择框中选择子类别
  7. 发送ajax到getcategory.php
  8. getcategory.php 从用户选择的子类别中查找是否还有更多子类别。
  9. ajax从getcategory.php接收数据
  10. 如果数据存在,jQuery 创建一个新的选择框并将获取的数据放入其中。
  11. 等等......直到选择框没有子类别。

我该如何实现这一目标?这是正确的方法吗?或者还有其他解决方法吗?谢谢


请使用下面的代码 1)conf.php

<?php

$conn = mysqli_connect('localhost','root','root','test') 或 die(mysqli_error($conn));?>

2)类别-dropdown.php

<?php
include 'conf.php';

$query = 'SELECT * FROM category WHERE parent_id=0';

$result = mysqli_query($conn,$query);
$data = $result->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MultiDropdown</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category">
<option value="">Select</option>
<?php
foreach($data as $d){
echo '<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
?>
</select>
</div>
</div>
<div id="dropdown_container"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('change','.category',function(){
var id = $(this).val();
$.ajax({
url:'getcategory.php',
type:'post',
data:{'id':id},
success:function(data){
//alert(data);
$('#dropdown_container').append(data);
}
})
});
});
</script>
</body>
</html>

3)获取类别.php

<?php
include 'conf.php';
if(isset($_POST['id'])){
$id= $_POST['id'];
$query = 'SELECT * FROM category WHERE parent_id = '.$id;
$result = mysqli_query($conn,$query);
$data = $result->fetch_all(MYSQLI_ASSOC);
if(!empty($data)){
echo '<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category">
<option value="">Select</option>';
foreach($data as $d){
echo '<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
echo '</select>
</div>
</div>';
}
}
?>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery ajax 基于父类别的无限动态选择框 的相关文章

  • 根据相同的 XML 模式 (XSD) 加速一批 XML 文件的 XML 模式验证

    我想加快根据同一个 XML 模式 XSD 验证一批 XML 文件的过程 唯一的限制是我处于 PHP 环境中 我当前的问题是 我想要验证的模式包括 2755 行的相当复杂的 xhtml 模式 http www w3 org 2002 08 x
  • Doctrine 生成实体命名空间问题?

    好吧 我对原则有最后一个问题 生成 实体命令 我运行以下命令 并得到预期的文件 src MyNamespace Bundle MyNamespaceBundle Resources config doctrine metadata orm
  • Woocommerce 预订中每人和每件商品的动态结账自定义字段

    对于预订网站 我正在尝试创建一个功能 可以根据人数添加与会者列表 感谢 LoicTheAztec 我已经获得了单次预订的代码 那部分工作正常 我还需要相同的功能来进行多次预订 我怎样才能实现这个目标 这是代码 Add a new check
  • 寻找多列索引的最佳顺序

    假设我有一个包含两个索引的表 一个位于 a 列 一个位于 a b 和 c 列 我注意到 根据索引定义中列的顺序 MySQL 可能最终使用单列索引而不是多列索引 即使多列索引中的所有三列都在 ON 中引用JOIN 的一部分 这有点引出了一个问
  • PHP:检测USB设备

    我正在尝试使用 PHP 将用户名和密码存储到 USB 拇指驱动器上的文本文件中 因此 当用户返回使用 USB 密钥登录时 应该会打开一个弹出窗口 并提示输入用户名和密码 所以我的问题是如何使用 PHP 检测 USB 拇指驱动器 所以客户端或
  • 如何创建到任何 fancybox 框的直接链接

    我需要当我单击任何使用 fancybox 的内容时 它会生成一个特定的 URL 因此当我将此链接发送给某人时 它会打开我想要的特定框 例如 fancybox net home当我点击第一张图片时 链接仍然存在fancybox net hom
  • 如何使用 JQuery 隐藏和显示 HTML 元素?

    如何使用 JQuery 隐藏和显示 HTML 元素而不产生任何特殊效果 使用hide http docs jquery com Effects hide and show http docs jquery com Effects show方
  • Liferay ajax 请求和 JSON 响应

    我是 Liferay 的新人 我使用服务生成器来创建数据库 我手动填充它们 最终我可以使用 JSP 调用它们PersonLocalServiceUtil class 现在我想在我的程序中使用Ajax 例如 有属性的人personID per
  • 如何在 PHP 中使用 foreach 循环仅回显一次特定的多个相同记录?

    我在 PHP 中使用 foreach 循环得到这些输出 现在 foreach 内部的输出如下所示 PHP代码 table thead tr th ACCOUNT NUMBER th th CATEGORY th th AMOUNT th t
  • 关闭旧的 php websocket

    我在用PHP Websockets https github com ghedipunk PHP Websockets创建一个简单的聊天服务器 当我第一次运行在我的服务器上创建 websocket 的 php 脚本时 一切正常 如果脚本由于
  • 如何保存包含框架/iframe 的完整 html 页面?

    在网页抓取期间 我想将当前页面的 html 保存到文件中以供以后调试 browser html在大多数情况下有帮助 但是当页面包含 iframe frame 时 它 的内容不会返回browser html 我必须用类似的东西单独得到它bro
  • 如何使表格单元格的最小宽度为 3 位数字?

    如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大 现在我正在硬编码min width 但我不喜欢硬编码一个值 因为我将来可能想更改字体 如果需要Javascript也没关系 table border 1 tr td 1 td td
  • addAttr 在 jquery 中不起作用?

    我有一个示例代码
  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • HTML 文本框,自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码
  • jQuery - xpath 查找?

    如果您在 xml 中有下面的 xml 那么您会使用以下命令变得昏昏欲睡 xml find animal find dog find beagle text jQuery 中是否有类似的方法来使用 xpath xml xpathfind an
  • 是否需要使用fetch_object或fetch_array?

    我最近发现我可以打印数据库中的结果而不使用mysqli fetch object功能 例如 假设我们有一个简单的 sql select 语句 可以使用如下所示的语句来执行 conn mysqli connect localhost root
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同
  • 将记录转换为序列化表单数据以通过 HTTP 发送

    有没有办法转换此记录 TError record code Word message String end TState record caption String address Cardinal counters TArray

随机推荐

  • 为什么我不能在类方法中使用预定义变量?

    我尝试在类方法中使用预定义变量 例如 PSVersionTable 或 PSScriptRoot 他们失败并显示错误消息 方法中未分配变量 Example Class Foo String Version GetVersion If PSV
  • Git:更改不应该保留在其分支内吗?

    我对使用 Git 还比较陌生 这是我到目前为止所做的 git branch master git status On branch master nothing to commit working directory clean git b
  • ffmpeg 使用 -movflags faststart

    我尝试使用命令 movflags 快速启动 并得到以下错误 Microsoft Windows 版本 6 0 6002 版权所有 c 2006 Microsoft 公司 版权所有 C uploads 1 videos gt ffmpeg i
  • MATLAB 颜色条刻度标记错误?

    我正在绘制 9 个子图 如下图所示 其中一个颜色条代表三个子图 在这里我想将颜色条中的最高值显示为 gt value 令人惊讶的是 当我手动将刻度标签编辑为h TickLabels end gt h TickLabels end 颜色条开始
  • 哪种架构称为非均匀内存访问(NUMA)?

    根据wiki http en wikipedia org wiki Non uniform memory access 非均匀内存访问 NUMA 是一种用于多处理的计算机内存设计 其中内存访问时间取决于相对于处理器的内存位置 但尚不清楚它是
  • 处理数据表中的会话超时(使用服务器端数据源处理)

    我有一个由服务器端 Ajax 数据源支持的数据表表单 它在后端使用 struts 操作来处理请求 获取数据并发送 JSON 响应 服务器端操作需要在身份验证模式下运行 即需要有一个活动会话 处理数据表中会话超时错误的最佳方法是什么 目前它只
  • 用渐变色绘制一个 D3 圆

    如何用渐变颜色画一个圆 比如说 从黄色到蓝色的渐变 通常 要创建黄色圆圈 我们可以使用以下代码 var cdata 50 40 var xscale 40 var xspace 50 var yscale 70 var svg d3 sel
  • 带有版本控制的 json 数据存储

    问题定义 有一个Java服务器存储JSON可以映射到 Java 类的数据 Java 类可能会发生变化 目标是能够更新 Java 类并且仍然能够解码JSON旧版本的数据到新版本的 Java 对象 应该有一个良好的版本控制系统 例如 能够向 J
  • Emacs Evil“重复”(点)行为

    我的中有以下行 emacs define key evil normal state map M j lambda interactive evil next line 5 这使得文件中的导航变得更加容易 例如 与M j我在下面 5 行 所
  • 自动调整文本框控件的垂直大小

    在 C 表单中 我有一个面板锚定所有侧面 内部有一个文本框 锚定顶部 左侧 右侧 当文本加载到文本框中时 我希望它自动垂直扩展 这样我就不需要滚动文本框 如果有更多文本不适合面板 最多滚动面板 有什么方法可以用文本框做到这一点吗 我不限于使
  • WPF 路径冲突检测?

    I have two hexagon shapes
  • 通过 dataTransfer 传递对象

    我试图找出一种通过 javascript 的 event dataTransfer 传递本机对象以进行拖放的方法 我正在编写 CMS 的前端编辑器部分 并希望用户能够拖放元素 许多不同类型 从文件到图像到 HTML 片段到几乎任何内容 这就
  • 查询具有相同ID的同一列中具有不同值的SQL表

    我有一个 SQL Server 2012 表ID First Name and Last name The ID每个人都是唯一的 但由于历史提要中的错误 不同的人被分配了相同的 ID ID FirstName LastName 1 ABC
  • 使用字典作为数据源绑定组合框

    我正在使用 NET 2 0 并且尝试将组合框的数据源绑定到已排序的字典 所以我收到的错误是 在数据源上找不到 DataMember 属性 Key SortedDictionary
  • 记录到 golang 中的文件

    我从 golang 开始 当我开始构建我的应用程序时 我想从一开始就添加日志记录 这就是我遇到问题的地方 如果我打开一个文件并使用标准日志记录库 我就可以写入文件 就像这样 package main import os fmt log fu
  • Socat串口嗅探

    我目前正在尝试访问连接到应用程序的串行端口的两个方向上的数据 我想做的是 ttymxc0 socat sniff ttyV0 应用程序ttymxc0 是真实端口 ttyV0 是虚拟端口 我发现 socat 命令适用于 Ubuntu 16 0
  • 为什么我仍然收到“已超过传入邮件的最大邮件大小配额 (65536)”错误?

    我遇到了众所周知的 WCF 错误 已超出传入消息的最大消息大小配额 65536 要增加配额 请使用相应绑定元素上的 MaxReceivedMessageSize 属性 在阅读了此错误的前五个 Google 结果后 我仍然不知道我的服务 客户
  • Http PUT 请求到 jpeg

    我收到了如下 HTTP PUT PUT photo HTTP 1 1 X Apple AssetKey F92F9B91 954E 4D63 BB9A EEC771ADE6E8 X Apple Transition Dissolve Con
  • 如何使用 Spring Security 和 Spring Session 从多个服务器获取相同的会话

    很抱歉我的英语还是不太好 请耐心等待 希望您能理解我的问题 我有两个网络服务器 每个网络应用程序都是相同的 Web 服务器共享一台 Redis 服务器 我使用 Spring Security 和 Spring Session 当我登录第一台
  • jQuery ajax 基于父类别的无限动态选择框

    我有一个类别表 category id category name parent id 1 Electronics 0 2 Mobile Phones 1 3 Computers 1 4 Iphone 2 5 Samsung Galaxy