javascript - PHP foreach 中的 Javascript

Question

我使用 , 制作了一个循环foreach来显示产品列表。然后我制作了一个模态来编辑每个产品。我需要获取产品维度的值，我将在“工作下拉”和“供应下拉”之间进行依赖下拉。目前，我无法继续使用 Ajax，因为我在获取维度值的第一步时遇到了问题。在下面的这段代码中，我尝试通过 javascript 获取每个产品的“长度”值。但它返回相同的值，它始终是第一个产品的值，即使我点击列表中的第 2、3、4 个产品。

<div class="table-responsive">
                        <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Supplier</th>
                                    <th>Dimension</th>
                                    <th>Edit</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $pcs_1 = 0;
                                $meter_1 = 0;
                                foreach ($stock as $s) { ?>
                                    <tr>
                                        <td class="small">
                                            <?php echo $s->cat . ' - ' . $s->prod ?>
                                        </td>
                                        <td class="small">
                                            <?php echo $s->spl ?>
                                        </td>
                                        <td class="small">
                                            <?php echo $s->length . ' x ' . $s->width . ' x ' . $s->height . ' x ' . $s->diameter  ?>
                                        </td>
                                        <td>
                                            <a type="button" data-toggle="modal" class="btn btn-small" data-target="#modal_edit<?php echo $s->id ?>"><i class="fas fa-edit"></i></a>

                                            <!--MODAL-->
                                            <div class="modal fade" id="modal_edit<?php echo $s->id ?>" role="dialog">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <form class="form-horizontal" method="post" action="<?php echo site_url('admin/Stock/edit/') ?>">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="labelModal">EDIT STOCK</h5>
                                                            </div>
                                                            <div class="modal-body">
                                                                <input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />

                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            <div class="col-sm-3">
                                                                                <div class="form-group">
                                                                                    <?php echo form_label('JOB') ?>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-sm-9">
                                                                                <div class="form-group">
                                                                                    <select name="ref" id="ref" class="form-control" required onchange="GetData()">
                                                                                        <option value="">-- Select Job --</option>
                                                                                        <?php foreach ($job as $j) : ?>
                                                                                            <option value="<?php echo $j->id; ?>"><?php echo $j->id ?> - <?php echo $j->cust ?></option>
                                                                                        <?php endforeach; ?>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-sm-3">
                                                                            <div class="form-group">
                                                                                <?php echo form_label('Supply') ?>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-9">
                                                                            <select name="supply" id="supply" class="form-control" required>
                                                                                <option value="">--Select Supply--</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>

                                                                </div>

                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-warning submitBtn">edit</button>
                                                            </div>

                                                        </form>
                                                    </div>
                                                </div>
                                            </div> <!-- modal -->

                                        </td>
                                    </tr>
                                <?php   } ?>

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

这是javascript：

    <script type="text/javascript">
    function GetData() {
        var length_product = $("#length_product").val();
        alert(length_product);
    }
</script>

该列表运行良好，但我不知道如何在 javascript 上获取每个列表的详细信息（将多个值从“列表内的模态”传递给“Javascript”）。

标签： javascriptphp

Answer 1

对我来说，看起来你总是得到价值

<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />

而不是来自 select 元素的选项。

尝试以下操作：

$('#ref').on('change', function(event) {
  event.preventDefault();
  var length_product = $(this).val();
  alert(length_product);
});

对于 PHP 和 HTML：

<div class="form-group">
  <select name="ref" id="ref" class="form-control" required>
    <option value="">-- Select Job --</option>
    <?php foreach ($job as $j) { ?>
    <option value="<?php echo $j["id"]; ?>"><?php echo $j["id"]; ?>-<?php echo $j["cust"]; ?></option>
    <?php 
    }
    ?>
  </select>
</div>

希望这可以帮助！