Question

我有一个单行的表，有2个下拉列表。第二个下拉依赖于第一个通过JQuery更改事件。在我的表格下面，我有一个按钮，允许用户克隆一个新的表格行，并在我的最后一行之后追加。

现在让我说我点击了我的按钮，现在我有2行。当我在第一行进行选择时，首先下拉第一行的第二个下拉变为可用，我可以进行选择。

当我第一行更改第二行时，第一行中的第二行下移会相应地改变我在第二行中首先下拉的选择。

这是我的HTML看起来像

<table id="component_table">
    <thead>
        <tr>
            <th>Component</th>
            <th>Component Type</th>
            <th>Component Thickness</th>
        </tr>
    </thead>
    <tbody id="component_tb">
        <tr>
            <td><?php echo $roofComponentDropDown ?></td>
            <td><?php echo $roofComponentTypeDropDown ?></td> 
            <td><input id="component_thickness" name="component_thickness" type="text"></td>
        </tr>
    </tbody>
</table>
<input type="button" value="+" id="addRows" />

以下是每次下拉

$roofComponentQuery = "SELECT * FROM roof_component";
$roofComponentData = mysqli_query($dbc, $roofComponentQuery);

while ($rcRow = mysqli_fetch_array($roofComponentData)) {
         $roofComponentOptions .="<option value=\"".$rcRow['roof_component_id']."\">" . $rcRow['roof_component_name'] . "</option>";
}

$roofComponentDropDown = "<select name='selectedRoofComponent' id='selectedRoofComponent' onChange='getComponentType(this.value)'>
                            <option selected='selected' disabled='disabled' value=''>Select Component</option>
                        " . $roofComponentOptions . "
                        </select></br>";

$roofComponentTypeDropDown = "<select name='selectedComponentType' id='selectedComponentType'>
                                <option class='toggle_control' selected='selected' disabled='disabled' value=''>Select Type</option>
                            </select></br>";

这是下拉列表的更改事件。

function getComponentType(val) {
    $.ajax({
    type: "POST",
    url: "getroofcomponenttype.php",
    data:'roof_component_id='+val,

    success: function(data){
            $("#selectedComponentType").html(data);
    }
    });
}

这是我在用户点击+按钮

时克隆表格行的方法

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $componentTB.children('tr').first().clone();
    $("#addRows").click(function() {
        $componentTB.append($firstTRCopy.clone());
    });
});

我目前知道有了这个克隆功能，我正在重复ID {＃3}}。

我不知道该怎么做，我怎样才能使每个表行下降仅依赖于该行中的下拉？

我最终必须遍历此表并将每个表选择的信息插入到MySQL DB中。

我应该以其他方式这样做吗？

请任何帮助都会很棒。

Answer 1

不是仅传递值，而是传递整个元素。在PHP代码中将onChange='getComponentType(this.value)'替换为onChange='getComponentType(this)' 你的ajax调用应该是：

function getComponentType(ele) {
    var ths = $(ele);
    $.ajax({
        type: "POST",
        url: "getroofcomponenttype.php",
        data:'roof_component_id='+ths.val(),
        success: function(data){
            ths.parent().parent().find("#selectedComponentType").html(data);
        }
    });
}

克隆后动态下降中断

1 个答案: