动态行的动态下拉选择，而不仅仅是第一行

【问题标题】：Dynamic dropdown selection for dynamic rows not just first row动态行的动态下拉选择，而不仅仅是第一行
【发布时间】：2021-09-10 20:59:32
【问题描述】：

我创建了一个用于输入产品数据的表单，它将结果发送回 mysql 数据库。我有一个名为“attribute_name”的下拉/选择 ID 和另一个“attribute_value”，我设法将结果发送回数据库，效果很好。但是，我想限制用户仅根据名称选择值，因此如果他们选择 size 他们将只有小、中、大而不是黑色、迷彩、紫色的值来自 颜色，反之亦然。

底部的脚本适用于第一行，但不适用于屏幕截图中显示的任何其他行。

工作

不工作

代码

    <?php
    include 'assets/processes/db-connection.php';
    $query = "SELECT * 
                FROM attribute_name;";
    $query_run = mysqli_query($conn, $query);
    $att_name = "<select name='attribute_name' id='attribute_name' class='form-control country'>";
    $att_name .= "<option value='0'></option>";
    while ($row = mysqli_fetch_assoc($query_run)) {
    $att_name .= "<option value='{$row['attribute_name']}'>{$row['attribute_name']}</option>";
    }
    $att_name .= "</select>"
    ?>
      <?php
    include 'assets/processes/db-connection.php';
    $query = "SELECT `attribute`.*, `attribute_name`.*
                FROM `attribute` 
                    LEFT JOIN `attribute_name` ON `attribute`.`attribute_name_id` = `attribute_name`.`attribute_name_id`;";
    $query_run = mysqli_query($conn, $query);
    $att_value = "<select name='attribute_id' id='attribute_value' class='form-control'>";
    $att_value .= "<option value='0'></option>";
    while ($row = mysqli_fetch_assoc($query_run)) {
    $att_value .= "<option data-parent='{$row['attribute_name']}' value='{$row['attribute_id']}'>{$row['attribute_value']}</option>";
    }
    $att_value .= "</select>"
    ?>

        <div id="wrapper">
          <div id="form_div">
            <table class="table table-hover text-nowrap" id="attribute_table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Value</th>
                  <th colspan="1">Action</th>
                </tr>
              </thead>
              <tr id="row1">
                <td>
                  <?php echo $att_name; ?>
                </td>
                <td>
                  <?php echo $att_value; ?>
                </td>
                <td><input class="btn btn-block btn-primary" type="button" onclick="add_attribute_row();" value="+"></td>
              </tr>
            </table>
          </div>
        </div>
        <script>
          $('#attribute_name').change(function() { var parent = $(this).val(); $('#attribute_value').children().each(function() { if ($(this).data('parent') != parent) { $(this).hide(); } else $(this).show(); }); });
          </script>

此代码经过编辑以在 stackoverflow 上使用 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="form_div">
        <table class="table table-hover text-nowrap" id="attribute_table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th colspan="1">Action</th>
                </tr>
            </thead>
            <tr id="row1">
                <td>
                    <select name='attribute_name' id='attribute_name' class='form-control'>
                    <option value='0'></option>
                    <option value='Colour'>Colour</option>
                    <option value='Size'>Size</option>
                    </select>
                </td>
                <td>
                    <select name='attribute_id' id='attribute_value' class='form-control'>
                    <option value='0'></option>
                    <option data-parent='Colour' value='1'>Black</option>
                    <option data-parent='Colour' value='2'>Camo</option>
                    <option data-parent='Colour' value='3'>Purple</option>
                    <option data-parent='Size' value='4'>Small</option>
                    <option data-parent='Size' value='5'>Medium</option>
                    <option data-parent='Size' value='6'>Large</option>
                    </select>
                </td>
                <td><input class="btn btn-block btn-primary" type="button" onclick="add_attribute_row();" value="+"></td>
            </tr>
        </table>
    </div>
</div>
<script>
function add_attribute_row() {
    $rowno = $("#attribute_table tr").length;
    $rowno = $rowno + 1;
    $("#attribute_table tr:last").after("<tr id='row" + $rowno + "'><td><select name='attribute_name' id='attribute_name' class='form-control'><option value='0'></option><option value='Colour'>Colour</option><option value='Size'>Size</option></select></td><td><select name='attribute_id' id='attribute_value' class='form-control'><option value='0'></option><option data-parent='Colour' value='1'>Black</option><option data-parent='Colour' value='2'>Camo</option><option data-parent='Colour' value='3'>Purple</option><option data-parent='Size' value='4'>Small</option><option data-parent='Size' value='5'>Medium</option><option data-parent='Size' value='6'>Large</option></select></td><td><input class='btn btn-block btn-primary' type='button' value='-' onclick=del_att_row('row" + $rowno + "')></td></tr>");
}
function del_att_row(rowno) {
    $('#' + rowno).remove();
};
</script>
<script>
    $('#attribute_name').bind('change', function () {
        var parent = $(this).val();
        $('#attribute_value').children().each(function () {
            if ($(this).data('parent') != parent) {
                $(this).hide();
            } else
                $(this).show();
        });
    });
</script>

【问题讨论】：

  • 您实际上只是在自己在线创建... $att_name 应该变为：$att_name[0] 例如：$att_name[0] = "
  • 欢迎来到 Stack Overflow。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example 您当前的示例无法复制，甚至不提供示例数据。
  • @Shlomtzion 我添加了 $i=0;和 ++$i 在每个 while 循环的末尾，但是当我添加新行时它对下拉选择没有影响。

标签： javascript php html jquery


【解决方案1】：

  1. 首先，您不能使用重复 ID。您应该改用 class。检查这个答案Class vs ID。

  2. 其次，我已将您的 change 事件更改为 .on('change')，这将适用于动态添加的选择。检查此示例JQuery .on('change')。

  3. 最后，您不想选择 all 类 attribute-name 的选择，您需要在该特定行上找到选择。为此，您可以使用 .closest('tr') 选择器选择事件发生的当前行 &lt;tr&gt;，然后使用 **.find('.attribute-value')** which will traverse and find element with the class attribute-value`。

来自文档：

  • .closest 选择器向上遍历 DOM 以找到匹配条件的父代。
  • .find 选择器向下遍历匹配条件的事件发生的 DOM。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="form_div">
        <table class="table table-hover text-nowrap" id="attribute_table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th colspan="1">Action</th>
                </tr>
            </thead>
            <tr id="row1">
                <td>
                    <select name='attribute_name' id='attribute_name' class='form-control attribute_name'>
                    <option value='0'></option>
                    <option value='Colour'>Colour</option>
                    <option value='Size'>Size</option>
                    </select>
                </td>
                <td>
                    <select name='attribute_id' id='attribute_value' class='form-control attribute_value'>
                    <option data-parent='0' value='0'></option>
                    <option data-parent='Colour' value='1'>Black</option>
                    <option data-parent='Colour' value='2'>Camo</option>
                    <option data-parent='Colour' value='3'>Purple</option>
                    <option data-parent='Size' value='4'>Small</option>
                    <option data-parent='Size' value='5'>Medium</option>
                    <option data-parent='Size' value='6'>Large</option>
                    </select>
                </td>
                <td><input class="btn btn-block btn-primary" type="button" onclick="add_attribute_row();" value="+"></td>
            </tr>
        </table>
    </div>
</div>
<script>
function add_attribute_row() {
    $rowno = $("#attribute_table tr").length;
    $("#attribute_table tr:last").after("<tr id='row" + $rowno + "'><td><select name='attribute_name' id='attribute_name' class='form-control attribute_name'><option value='0'></option><option value='Colour'>Colour</option><option value='Size'>Size</option></select></td><td><select name='attribute_id' id='attribute_value' class='form-control attribute_value'><option data-parent='0' value='0'></option><option data-parent='Colour' value='1'>Black</option><option data-parent='Colour' value='2'>Camo</option><option data-parent='Colour' value='3'>Purple</option><option data-parent='Size' value='4'>Small</option><option data-parent='Size' value='5'>Medium</option><option data-parent='Size' value='6'>Large</option></select></td><td><input class='btn btn-block btn-primary' type='button' value='-' onclick=del_att_row('row" + $rowno + "')></td></tr>");
}
function del_att_row(rowno) {
    $('#' + rowno).remove();
};
</script>
<script>
$(document).on('change', '.attribute_name', function () {
        var parent = $(this).val();  $(this).closest('tr').find('.attribute_value').children().each(function () {
            if ($(this).data('parent') != parent) {
                $(this).hide();
            } else
                $(this).show();
        });
    });
</script>

【讨论】：

    【解决方案2】：

    我希望这将说明需要和方式！ - 获取您的代码并对其进行了一些更改 - 例如，我在一个中创建了两个数组，除以 var 的名称并按其包含的数量计算...我还在 html 中和周围放置了两个循环以实现名称 - 在我们的例子中只运行两次的主循环（这个代码示例）和每个名称的值的内部循环......：

    <?php

$att_data["Colour"][] = "Black";
$att_data["Colour"][] = "Blue";
$att_data["Colour"][] = "Red";
$att_data["Colour"][] = "Green";

$att_data["Size"][] = "Large";
$att_data["Size"][] = "Small";
$att_data["Size"][] = "Medium";
$att_data["Size"][] = "XL";
echo '<pre>';
print_r($att_data);

$i = 0;
$s = 0;
?>


    <div id="wrapper">
        <div id="form_div">
            <table class="table table-hover text-nowrap" id="attribute_table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                        <th colspan="1">Action</th>
                    </tr>
                </thead>
                <?php
                foreach($att_data as $key => $d){ ?>
                    <tr id="row1">
                        <td>
                            <select name='attribute_name' id='attribute_name' class='form-control'>
                                <option value='<?php echo $key; ?>'><?php echo $key; ?></option>
                            </select>
                        </td>
                        <td>
                            <select name='attribute_id' id='attribute_value' class='form-control'>
                                <?php
                                foreach ($att_data[$key] as $val){
                                    ?><option value='<?php echo $val; ?>'><?php echo $val; ?></option><?php
                                } ?>
                            </select>
                        </td>
                        <td><input class="btn btn-block btn-primary" type="button" onclick="add_attribute_row();" value="+"></td>
                    </tr> <?php
                }
                ?>

            </table>
        </div>
    </div>

    这将输出：

    这应该解释如何收集和分发数据！ :) - 在我的情况下，颜色等键是名称......而值是值！ 不需要太多变量，带有正确键的漂亮数组可以更好地收集数据！

    【讨论】：

    • 您的回答并没有解决问题。它适用于固定选择选项，但 OP 需要的是动态设置选择选项。而 OP 面临的问题是，JQuery 更改事件仅适用于第一行。
    猜你喜欢
    • 1970-01-01
    • 2011-07-02
    • 1970-01-01
    • 2018-12-22
    • 2019-06-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode