1

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

当下拉菜单只使用一次时，代码既好又简单——但我希望将每组下拉菜单重复四次。

下拉菜单一被分配了 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 块中的最佳方法是什么？（我知道我不能像这样在 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>
4

2 回答 2

0

不要重复相同的 javascript 代码 4 次，而是将其放在循环之外，并为您的选择元素提供类，并将它们用作您的 jquery 代码的选择器。然后，您可以向包含其 id 的选择元素添加一个属性（例如名为 data-id）。它看起来像这样

<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>

你的javascript代码（循环外）看起来像这样

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

请注意，我在引用选择元素的更改事件中使用了关键字“this”。

编辑：添加反斜杠以转义 jQuery 选择器中的括号（否则 jQuery 将其解释为属性）。

于 2013-07-17T19:57:50.300 回答
0

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

select相反，您应该为所有常见元素添加一个类似的类。就像是class="experience"

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

<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>
于 2013-07-17T20:00:17.690 回答