连接 Function 用于将一个表中的字段值与另一表匹配

Question

当表中的字段值与另一个表的字段中的值匹配时，我正在尝试显示字段值。

就像我正在创建一个下拉字段。 这里基于汽车 Model 下拉菜单。 像法拉利一样 Model 用户在下拉列表中选择了表 newcar_products 下的 prod_name 然后其变体如 Portnifo、superfast、488 应显示在 Variant 字段下。

但是到目前为止发生的事情 - 无论 model 选择法拉利、本田还是大众汽车 - 变体都会显示完整的变体列表，如 polo、jazz、portnifo、accord、passat 存储在表 newcar_variants 的 v_name 中。 我希望变量 v_name 应该只显示表 A 中的 v_prod_id 与表 B 中的 id 匹配

就像，我已经创建了这两个函数，其中第一个 function 的下拉菜单运行良好

      <?php    
        function model_drop_down(){
            $database = JFactory::getDBO();
            $sql = "SELECT * from #__newcar_products where state='1'  order by prod_name Asc";
            $database->setQuery($sql);
            $rows = $database->loadObjectList();
            $list="";
            foreach($rows as $row){
                $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->prod_name."</option>";
            }
            return $list;
        }


       function variant_drop_down(){
    $database = JFactory::getDBO();
    $sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    and a.state='1' where  1 order by a.v_prod_id asc";
    $database->setQuery($sql);
    $rows = $database->loadObjectList();
    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    return $list;
    } ?>

     <div class="common-box">
        <div class="common-box-left">Car Model*</div>
        <div class="common-box-right">
          <div id="txtHint">
          <select name="model"  class="list-box-big"  id="model"  lang="MUST" title="Model" style="width:245px; height:25px;">
              <option value="" selected="selected" style="padding-left:10px;"> Select Model</option>
<?php echo model_drop_down();?>
            </select>
          </div>
        </div>
      </div>
      <!--box end-->
      <!--box start-->
      <div class="common-box">
        <div class="common-box-left">Sub Model*</div>
        <div class="common-box-right">
          <div id="txtHintVariant">
          <select name="variant" class="list-box" id="brand"  lang="MUST" title="Brand">
                <option value="" selected="selected" style='padding-left:10px;'>Select Variant</option>
                <?php echo variant_drop_down();?>
            </select>
          </div>

继承人两个表的架构

截至目前，显示所有型号和所有变体名称的字段。 现在在变体的第二个字段中发生了什么，它显示存储在 v_name 中的所有值，而不仅仅是那些在 v_name 下的值，其中 newcar_variants 中的 v_prod_id 与 newcar_products 中的 id 匹配

我认为需要一种方法第1步当用户select Model从第一个字段下拉时，字段id的varle需要存储在newcar_products

步骤 2 然后在 select 变体的第二个字段中，当用户 select 在第一个字段中下拉 model 时。 存储在 newcar_products 中的“id”值应与第二个表 newcar_variants 中的 v_prod_id 匹配，因此要在匹配“v_name”中显示的变体列表

如何创建 function 以实现所需。 任何人都可以帮助，新手这将是一个很好的学习。 谢谢

Answer 1

在存根数据库连接后，我获取了您的代码并添加了缺少的功能。

您可以使用下面的链接现场试用：

https://code.sololearn.com/wm6EGyHmt5cj

只需单击绿色的“运行”按钮，您就可以在下拉菜单中选择 select 和 model 并查看相应过滤的变体。

这也是完整的代码（以防此链接过期）：

<?

function getModel($id, $name) {
    $row = new stdClass();
    $row->id = $id;
    $row->prod_name = $name;
    return $row;
}

function getVariant($id, $name, $modelId) {
    $row = new stdClass();
    $row->id = $id;
    $row->v_name = $name;
    $row->v_prod_id = $modelId;
    return $row;
}

function model_drop_down(){
    //---YOUR CODE COMMENTED BELOW---
    // $database = JFactory::getDBO();
    // $sql = "SELECT * from #__newcar_products where state='1'  order by prod_name Asc";
    // $database->setQuery($sql);
    // $rows = $database->loadObjectList();
    //---END OF YOUR COMMENTED CODE---

    //---MY DB STUB BELOW
    $rows = [];
    array_push($rows, getModel(0, 'Ferrari'));
    array_push($rows, getModel(1, 'Honda'));
    array_push($rows, getModel(2, 'Volkswagen'));
    //---END OF MY DB STUB

    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->prod_name."</option>";
    }
    return $list;
}


function variant_drop_down(){
    //---YOUR CODE COMMENTED BELOW---
    // $database = JFactory::getDBO();
    // $sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    // and a.state='1' where  1 order by a.v_prod_id asc";
    // $database->setQuery($sql);
    // $rows = $database->loadObjectList();
    //---END OF YOUR COMMENTED CODE---

    //---MY DB STUB BELOW
    $rows = [];
    array_push($rows, getVariant(0, '250 GTO', 0));
    array_push($rows, getVariant(1, 'F430', 0));
    array_push($rows, getVariant(2, 'F40', 0));
    array_push($rows, getVariant(3, 'Civic', 1));
    array_push($rows, getVariant(4, 'CR-V', 1));
    array_push($rows, getVariant(5, 'Golf', 2));
    array_push($rows, getVariant(6, 'Polo', 2));
    array_push($rows, getVariant(7, 'Passat', 2));
    //---END OF MY DB STUB

    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' data-v_prod_id='".$row->v_prod_id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    return $list;
}

?>

<div class="common-box">
    <div class="common-box-left">Car Model*</div>
    <div class="common-box-right">
        <div id="txtHint">
            <select name="model" class="list-box-big" id="model" lang="MUST" title="Model" style="width:245px; height:25px;">
                <option value="" selected="selected" style="padding-left:10px;"> Select Model</option>
                <?php echo model_drop_down();?>
            </select>
        </div>
    </div>
</div>
<!--box end-->
<!--box start-->
<div class="common-box">
    <div class="common-box-left">Sub Model*</div>
    <div class="common-box-right">
        <div id="txtHintVariant">
            <select name="variant" class="list-box" id="brand" lang="MUST" title="Brand">
                <option value="" selected="selected" style='padding-left:10px;'>Select Variant</option>
                <?php echo variant_drop_down();?>
            </select>
        </div>
    </div>
</div>

<script>
//wait for html DOM loaded
document.addEventListener("DOMContentLoaded", function(event) {
    //listen to "model dropdown changed by user" event
    document.getElementById("model").onchange = function filterVariants(){

        //get the currently selected model
        const selectedModelId = document.getElementById('model').value;

        if(selectedModelId=="") {
        //if no model is selected, show all the variants (set display=block for all options)

            for(option of document.querySelectorAll('#brand>option')) {
                option.style.display='block';
            }

        } else {
        //if a model is selected, show the only variants having 'data-v_prod_id' attribute equal to the id of the selected model, plus the defaul "Select Variant" option

            for(option of document.querySelectorAll('#brand>option')) {
                if(option.getAttribute('data-v_prod_id')==selectedModelId) {
                    //variant from the selected model => show the option
                    option.style.display='block';
                } else if(option.value=="") {
                    //default option (the one with "Select Variant") => show it
                    option.style.display='block';
                    option.selected=true;
                } else {
                    //else, it's a variant from another model => hide it
                    option.style.display='none';
                }
            }
        }

        //reset the variant dropdown to default "Select Variant" value
        document.querySelector('#brand>option[value=""]').selected=true

    };
});
</script>

这是我的更改的描述：

1. 样机数据

当然，我无权访问您的数据库，因此我将 SQL 连接和查询替换为几行代码以创建模型数据：

function getModel generates a model object that looks like a SQL model result row

function getVariant生成一个变体 object 看起来像 SQL 变体结果行

然后在您的model_drop_down function 中，我手动创建数据以填充$rows以使$rows看起来与您的 SQL 查询的结果相同：

array_push($rows, getModel(0, 'Ferrari'));
array_push($rows, getModel(1, 'Honda'));
array_push($rows, getModel(2, 'Volkswagen'));

例如，最后一行意味着我正在创建一个模型 model，id=2 和 name='Volkswagen'

然后我对你的variant_drop_down中的变体做了同样的事情：

array_push($rows, getVariant(0, '250 GTO', 0));
array_push($rows, getVariant(1, 'F430', 0));
array_push($rows, getVariant(2, 'F40', 0));
array_push($rows, getVariant(3, 'Civic', 1));
array_push($rows, getVariant(4, 'CR-V', 1));
array_push($rows, getVariant(5, 'Golf', 2));
array_push($rows, getVariant(6, 'Polo', 2));
array_push($rows, getVariant(7, 'Passat', 2));

例如，最后一行意味着我正在创建一个 id=7、name='Passat' 和 v_prod_id=2（即大众汽车）的模型变体。

好的，现在我已经为你的数据库存根了，我们可以开始编码了！

---

2. 更改 SQL 变体查询以获取所有变体和 select 'v_prod_id' 字段

variant_drop_down只会被调用一次（php是服务端语言，运行一次会渲染页面的html代码，不会再次运行），所以我们需要一次获取所有数据，并取回v_prod_id字段以记住哪个变体属于哪个 model（我们将在接下来的步骤中使用此信息）

因此，我们将更改查询中的两件事：

1. 删除 JOIN ON a.v_prod_id = b.id
2. 在 SELECT 子句中添加 a.v_prod_id

所以从这里：

SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id and a.state='1' where  1 order by a.v_prod_id asc

你最终会得到这样的东西：

SELECT a.id, a.v_name, a.v_prod_id FROM #__newcar_variants a where a.state='1' order by a.v_prod_id asc

---

3. 在变体下拉列表的每个项目上添加 v_prod_id

这是通过在代码中添加data-v_prod_id='".$row->v_prod_id."'来完成的。

现在，变体下拉列表的 html 代码如下所示：

<select name="variant" class="list-box" id="brand" lang="MUST" title="Brand">
    <option value="" selected="selected">Select Variant</option>
    <option value="0" data-v_prod_id="0">250 GTO</option>
    <option value="1" data-v_prod_id="0">F430</option>
    <option value="2" data-v_prod_id="0">F40</option>
    <option value="3" data-v_prod_id="1">Civic</option>
    <option value="4" data-v_prod_id="1">CR-V</option>
    <option value="5" data-v_prod_id="2">Golf</option>
    <option value="6" data-v_prod_id="2">Polo</option>
    <option value="7" data-v_prod_id="2">Passat</option>
</select>

如您所见，我们在每个变体上都有 data-v_prod_id。

现在，对于变体下拉列表中的每个选项，我们知道它与哪个 model 相关。

因此，使用 javascript，每次用户更改 model 时，我们可以过滤显示的变体，其中 v_prod_id 等于所选 model。

---

4.使用javascript进行动态变体过滤

每次用户更改 model 时，我们都会相应地过滤变体下拉列表。

这是执行此操作的脚本，我在每一行都添加了注释以解释详细信息：

<script>
//wait for html DOM loaded
document.addEventListener("DOMContentLoaded", function(event) {
    //listen to "model dropdown changed by user" event
    document.getElementById("model").onchange = function filterVariants(){

        //get the currently selected model
        const selectedModelId = document.getElementById('model').value;

        if(selectedModelId=="") {
        //if no model is selected, show all the variants (set display=block for all options)

            for(option of document.querySelectorAll('#brand>option')) {
                option.style.display='block';
            }

        } else {
        //if a model is selected, show the only variants having 'data-v_prod_id' attribute equal to the id of the selected model, plus the defaul "Select Variant" option

            for(option of document.querySelectorAll('#brand>option')) {
                if(option.getAttribute('data-v_prod_id')==selectedModelId) {
                    //variant from the selected model => show the option
                    option.style.display='block';
                } else if(option.value=="") {
                    //default option (the one with "Select Variant") => show it
                    option.style.display='block';
                    option.selected=true;
                } else {
                    //else, it's a variant from another model => hide it
                    option.style.display='none';
                }
            }
        }

        //reset the variant dropdown to default "Select Variant" value
        document.querySelector('#brand>option[value=""]').selected=true

    };
});
</script>

---

希望我的回答能让你满意。

同样，您可以通过单击此链接进行现场试用： https://code.sololearn.com/wm6EGyHmt5cj然后单击绿色的“运行”按钮。

Answer 2

<optgroup>这个 HTML 标签可以帮助你吗？ https://developer.mozilla.org/fr/docs/Web/HTML/Element/Optgroup

那么你只有一个数据库查询：

function variant_drop_down(){
    $database = JFactory::getDBO();
    $sql = "SELECT b.prod_name, a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    and a.state='1' where  1 order by a.v_prod_id asc";
    $database->setQuery($sql);
    $rows = $database->loadObjectList();
    $list="";
    $label=null;
    foreach($rows as $row){
        if ($label!=$row->prod_name) {
            if (null!==$label) {
                $list.="</optgroup>";
            }
            $label=$row->prod_name;
            $list.='<optgroup label="'.$label.'">';
        }
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    if (null!==$label) {
        $list.="</optgroup>";
    }
    return $list;
    } ?>

Answer 3

无论您试图实现什么，都不能仅通过 PHP 来完成。 您必须使用 JQuery/JavaScript 来获得结果。

如果您的模型和变体是 static 则使用文森特的代码，但要进行动态操作，您必须使用以下代码。

我只是给出一个想法，你必须锻炼基于 ajax 的解决方案的确切解决方案。

这将是第一个退出选项：

 <select name="model" id="model">
       <?php echo model_drop_down();?>
 </select>

 <select name="variant" id="variant">
 </select>

您的 Jquery 代码将如下所示：

$(document).ready(function() {
    $('#model').change(function() {
        $.ajax({
            type : 'POST',
            url : 'variant.php',
            dataType : 'json',
            data: {
                model : $('#model').val()
            },
            success: function(data){
                $('#variant >option').remove();
                var s= document.getElementById('model');
                s.options[s.options.length]= new Option('Kindly Select Variant', '');
                $.each(data.variant, function() {
                    s.options[s.options.length]= new Option(this, this);
                })
            }
        });
    });
})

您的变体.php 文件

//I don't know the exact variant value but the post value is the mode id number here
// $_POST["model"] = $row->id

$database = JFactory::getDBO();

//Create the query to exact the only variants of model number here

$sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products 
    b ON a.v_prod_id = b.id and a.state=$_POST["model"] where  1 order by a.v_prod_id asc";

$database->setQuery($sql);
$rows = $database->loadObjectList();
foreach($rows as $row){
    $t[]= $row->v_name;
}
$return['variant']=$t;
echo json_encode($return);

这不是确切的解决方案，而是一个基本想法，您必须根据需要进行更改。 此示例可能包含一些小错误，因为它未运行

Answer 4

如果用户根据加载的汽车变体选择 var model，我更喜欢基于 ajax 的解决方案。关联

您也可以 go 用于基于 php 阵列的解决方案，让我知道我也可以向您展示，但我更喜欢 ajax 解决方案。