三个依赖下拉列表 opencart
three dependent drop down list opencart
我想制作 3 个从属下拉列表,每个下拉列表都依赖于前一个下拉列表,所以当我 select 第一个下拉列表中的项目时,所有数据都从数据库中获取并添加到第二个下拉列表中下来作为项目。
我知道如何使用 ajax 在普通 php 页面中执行此操作,但由于 opencart 使用 MVC,我不知道如何获得 selected 值
基本上,您需要两件事:
(1) 处理列表更改
向每个列表添加一个事件处理程序,当它发生变化时获取其选定值(您已经知道的部分),详细教程here以备不时之需它
只是一个建议(用于代码优化),而不是为每个列表关联一个单独的JS函数并重复代码,您可以编写一次函数,将更改列表的ID传递给它使用依赖列表的 ID 并在任何地方使用它。
你的 HTML 应该是这样的
<select id="list1" onchange="populateList('list1', 'list2')">
...
</select>
<select id="list2" onchange="populateList('list2', 'list3')">
...
</select>
<select id="list3">
...
</select>
和你的 JS
function populateList(listID, depListID)
{
// get the value of the changed list thorugh fetching the elment with ID "listID"
var listValue = ...
// get the values to be set in the depending list through AJAX
var depListValues = ...
// populate the depending list (element with ID "depListID")
}
(2) 填充依赖列表
通过 AJAX 将值发送到适当的 PHP 函数并取回值以更新依赖列表(您要求的部分 ),AJAX详细教程here
打开购物车使用前端控制器设计模式进行路由,URL 总是看起来像:
bla bla bla.bla/index.php?route=x/y/z&other parameters
, x = 包含一组的文件夹名称class 个文件,y = 包含特定 class 的文件名,z = 要调用的函数class(如果省略,将调用 index()
)
所以你的问题的答案是:
(第 1 步) 在您的 AJAX 请求中使用以下 URL:
index.php?route=common/home/populateList
(第 2 步) 打开文件 <OC_ROOT>/catalog/controller/common/home.php
,你会发现 class ControllerCommonHome
,添加一个名为 populateList
的新函数并在那里添加你的逻辑
(Step 3)要使用数据库对象,我之前回答过here
注意: 如果您在管理员端,则必须在所有链接和路由中都存在一个安全令牌,请使用 URL:
index.php?route=common/home/populateList&token=<?php echo $this->session->data['token'] ?>
并操作 admin
文件夹中的文件,而不是 catalog
P.S: 每当用户更改 list # i 中的选定值时,你应该更新 [=] 中的选项40=]list # i + 1 并重置以下所有列表 list # i + 2, list # i + 3 ..., 所以在你的情况下你应该当第一个列表值更改时总是重置第三个列表
P.P.S:非常好的OC 1指南。5.x => here(也可以用作OC 2.x 的参考,有一些修改)
我想制作 3 个从属下拉列表,每个下拉列表都依赖于前一个下拉列表,所以当我 select 第一个下拉列表中的项目时,所有数据都从数据库中获取并添加到第二个下拉列表中下来作为项目。 我知道如何使用 ajax 在普通 php 页面中执行此操作,但由于 opencart 使用 MVC,我不知道如何获得 selected 值
基本上,您需要两件事:
(1) 处理列表更改
向每个列表添加一个事件处理程序,当它发生变化时获取其选定值(您已经知道的部分),详细教程here以备不时之需它
只是一个建议(用于代码优化),而不是为每个列表关联一个单独的JS函数并重复代码,您可以编写一次函数,将更改列表的ID传递给它使用依赖列表的 ID 并在任何地方使用它。
你的 HTML 应该是这样的
<select id="list1" onchange="populateList('list1', 'list2')">
...
</select>
<select id="list2" onchange="populateList('list2', 'list3')">
...
</select>
<select id="list3">
...
</select>
和你的 JS
function populateList(listID, depListID)
{
// get the value of the changed list thorugh fetching the elment with ID "listID"
var listValue = ...
// get the values to be set in the depending list through AJAX
var depListValues = ...
// populate the depending list (element with ID "depListID")
}
(2) 填充依赖列表
通过 AJAX 将值发送到适当的 PHP 函数并取回值以更新依赖列表(您要求的部分 ),AJAX详细教程here
打开购物车使用前端控制器设计模式进行路由,URL 总是看起来像:
bla bla bla.bla/index.php?route=x/y/z&other parameters
, x = 包含一组的文件夹名称class 个文件,y = 包含特定 class 的文件名,z = 要调用的函数class(如果省略,将调用 index()
)
所以你的问题的答案是:
(第 1 步) 在您的 AJAX 请求中使用以下 URL:
index.php?route=common/home/populateList
(第 2 步) 打开文件 <OC_ROOT>/catalog/controller/common/home.php
,你会发现 class ControllerCommonHome
,添加一个名为 populateList
的新函数并在那里添加你的逻辑
(Step 3)要使用数据库对象,我之前回答过here
注意: 如果您在管理员端,则必须在所有链接和路由中都存在一个安全令牌,请使用 URL:
index.php?route=common/home/populateList&token=<?php echo $this->session->data['token'] ?>
并操作 admin
文件夹中的文件,而不是 catalog
P.S: 每当用户更改 list # i 中的选定值时,你应该更新 [=] 中的选项40=]list # i + 1 并重置以下所有列表 list # i + 2, list # i + 3 ..., 所以在你的情况下你应该当第一个列表值更改时总是重置第三个列表
P.P.S:非常好的OC 1指南。5.x => here(也可以用作OC 2.x 的参考,有一些修改)