Question

我目前有一个表单，它将在rebates.php中选择下拉列表并使用Ajax函数将其发送到update.php，该函数将根据使用下拉列表选择运行的查询显示表数据。表单有action=""，因此页面实际上不会重新加载。

我的网页上会显示多个表格。但是，某些表tds可能为空，因此我想隐藏这些表。目前，我在update.php页面中有一个隐藏任何空td表的函数。但是，这仅适用于第一个下拉选项。如果我从下拉列表中选择包含空td表的另一个项目，则不会隐藏这些项目，因为这将是第二个选择。我怎样才能改变这一点，以便所有空td表都被隐藏，无论它是第一个选择还是第二个，第三个等选择？

表格/下拉列表（rebates.php）：

<form name="myForm" action="">

<!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id">

    <script>
    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);

    function updateSelection(event) {

    updatetable(this.form);
    }
    </script>

    <option selected value="select">Choose a Master Supplier Title</option>
        <?php foreach($master_supp->fetchAll() as $master) { ?>
            <option data-name="<?php echo $master['Supplier_Group_Name'];?>">
                <?php echo $master ['Supplier_Group_Name'];?>
            </option>
        <?php } ?>
    </select>
</form>

Javascript（rebates.js）：

// Reads what the user selects from the drop down list and displays table when a selection is made
function updatetable(myForm) {   

    var selIndex = myForm.selectedIndex;
    console.log();
    var selName = $( "#mr_id option:selected" ).text().trim();
    console.log(selName);

$.ajax ({
    url: "update.php",
    method: "POST",
    data: {
        mr_id : selName
    },
    beforeSend: function () {
    },
    success: function(data){
        $(".table_div").html(data);
    }
 });

}

head中的update.php标记内的Javascript：

<script>
    $('table').each(function() {
        if($(this).find('tr').children("td").length < 1) {
        $(this).hide();
      }
    });
</script>

我自己遗漏了查询和表格，因为我认为不应该回答这个问题。但是，如果它们有用，我可以发布它们。我假设我可以在函数中使用常规table标识符，而不是特定的class或id。

Answer 1

如果我理解正确，您需要在AJAX调用后刷新视图。换句话说，每次AJAX调用成功时，您都必须运行$('table').each(function() {...}代码。尝试在AJAX成功调用中的$(".table_div").html(data)行之后包含该内容。

功能仅在首次下拉选择后运行

1 个答案: