php - JavaScript 计数与 PHP 循环一致

Question

我有一个带有两个下拉菜单的页面。第一个下拉菜单中选择的选项控制第二个下拉菜单中显示的内容。

当下拉菜单仅使用一次时，代码非常简单 - 但我希望将每组下拉菜单重复四次。

下拉菜单的 ID 为 experience[<?php echo $i; ?>][manufacturer] 。下拉菜单二分配了 ID experience[<?php echo $i; ?>][type] .

本质上，我所拥有的是:

<select id="experience[1][manufacturer]">...</select>
<select id="experience[2][manufacturer]">...</select>
<select id="experience[3][manufacturer]">...</select>
<select id="experience[4][manufacturer]">...</select>

...后跟:

<select id="experience[1][type]">...</select>
<select id="experience[2][type]">...</select>
<select id="experience[3][type]">...</select>
<select id="experience[4][type]">...</select>

我想知道:获得 <?php echo $i; ?> 等价物的最佳方法是什么？到用于输出第二个下拉菜单内容的 JavaScript block 中？ (我知道我不能像这样在 JavaScript 中直接使用 PHP - 我只是留下 <?php echo $i; ?> 片段来指示我需要在哪里输出数字 1、2、3、4 等。

感谢您的帮助!

代码:

<form>

<?php

$i=1;

while($i<=4) {

?>

    <select id="experience[<?php echo $i; ?>][manufacturer]">
    <option value="Ford">Ford</option>
    <option value="Honda">Honda</option>
    <option value="Mercedes">Mercedes</option>
    </select>

    <select id="experience[<?php echo $i; ?>][type]">

    <script type='text/javascript'>
    $(document).ready(function() {
        $("#experience[<?php echo $i; ?>][manufacturer]").change(function() {
            $("#experience[<?php echo $i; ?>][type]").load("get_type.php?choice=" + $("#experience[<?php echo $i; ?>][manufacturer]").val());
        });
    });
    </script>

    </select>

<?php

$i++;

}

?>

</form>

修改后的代码:

<form>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".experienceManufacturer").change(function() {
            $("#experience["+$(this).attr('data-id')+"][type]").load("get_type.php?choice=" + $(this).val());
        });
    });
    </script>

<?php $i=1;
while($i<=4) { ?>

    <select id="experience[<?php echo $i; ?>][manufacturer]" class="experienceManufacturer" data-id="<?php echo $i; ?>">
    <option value="Ford">Ford</option>
    <option value="Honda">Honda</option>
    <option value="Mercedes">Mercedes</option>
    </select>

    <select id="experience[<?php echo $i; ?>][type]">
    </select>

<?php
$i++;
}
?>

</form>

Answer 1

您不需要在 PHP 循环中包含 script 元素。

相反，您应该向所有常见的 select 元素添加类似的类。类似于 class="experience"

然后，使用单个脚本元素，您可以将事件附加到所有 select:

<script type='text/javascript'>
    $(document).ready(function() {
        $("select.experience").each(function(i,element){
            // here element is the actual item from the selected set, i is its index
            $(element).on("change", function() {
                $("#experience[" + i + "][type]").load("get_type.php?choice=" + $(element).val());
            });
        });
    });
</script>