操作AJAX填充的下拉列表

Manipulating dropdowns populated by AJAX

本文关键字：下拉列表 填充 AJAX 操作      更新时间：2023-09-26
JQuery是我在Javascript时代最好的朋友。然而，有些时候我需要弄清楚才能最终实现我的目标。这是其中一天。这是我遇到的一个问题，我真的找不到办法。我试着在下面解释一下。

我的HTML

<select name="one" id="one">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>
<select name="two" id="two">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>
<select name="three" id="three">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>

我的JQuery

$(document).ready(function() {
    if (one != 0) {
        // Set select dropdown one
    }
    if (two != 0) {
        // Set select dropdown two
    }
    if (three != 0) {
        // Set select dropdown three
    }
});
$(document).on('change', '#three', function() {
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    window.location = url;
});

PHP

<script type="text/javascript">
    var one = <?= $one; ?>;
    var two = <?= $two; ?>;
    var two = <?= $three; ?>;
</script>

问题

我想要实现的是，当在下拉列表一中选择一个选项时，JQuery加载下拉列表二。当在下拉列表2中选择一个选项时，JQuery将加载下拉列表三。

我已经完成了。但是，当选择下拉列表三时，它会进行刷新。但一旦刷新完成，所有选择值都将被再次设置，并触发另一次刷新。

我希望JQuery只在第一次刷新时设置刷新后的所有选择值(从而触发选择下拉菜单上的更改事件并加载值(，但在设置第三个选择下拉菜单值时不刷新。

如果我需要对此做更多解释，请告诉我。欢迎提出任何建议和帮助。

进度

if (false !== rootpfgroup && false !== hoofdpfgroup && false !== subpfgroup) {
    $('#one').val(rootpfgroup).trigger('change');
    $('#two').val(hoofdpfgroup).trigger('change');
    $('#three').val(subpfgroup);
}

我发现以下内容有效。但是，它只设置第一个下拉列表。在第一个下拉列表中选择一个值会触发一个ajax调用，该调用加载第二个下拉列表的选项。在第二个下拉列表中选择一个选项会触发一个ajax调用，该调用加载第三个选项。有人能告诉我更多关于如何处理这件事以及我做错了什么吗？提前谢谢。

根据我上面的评论，使用PHP设置所选的下拉值以设置HTML selected属性也会起作用，消除了刷新问题，这意味着值持久性在没有JS的情况下也能起作用(你是否关心这是另一回事(：

<?php
    $one = '';
    $two = '';
    $three = '';
    if (!empty($_POST['one'])) {
        $one = $_POST['one'];
    }
    if (!empty($_POST['two'])) {
        $two = $_POST['two'];
    }
    if (!empty($_POST['three'])) {
        $three = $_POST['three'];
    }
?>
$(document).on('change', '#three', function() {
    var form = $('#form');
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    form.attr('action', url);
    form.submit();
});
<form action="" method="POST" id="form">
    <select name="one" id="one">
        <option value="1" <?php if ($one == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($one == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($one == 3):?>selected<?php endif;?>>Three</option>
    </select>
    <select name="two" id="two">
        <option value="1" <?php if ($two == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($two == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($two == 3):?>selected<?php endif;?>>Three</option>
    </select>
    <select name="three" id="three">
        <option value="1" <?php if ($three == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($three == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($three == 3):?>selected<?php endif;?>>Three</option>
    </select>
</form>

正如我提到的，根据数据的实际外观(假设它不仅仅是数字列表；(，您可能能够在PHP中添加一些循环以避免重复。

<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
    $one = $_POST['one'];
}
if (!empty($_POST['two'])) {
    $two = $_POST['two'];
}
if (!empty($_POST['three'])) {
    $three = $_POST['three'];
}
?>
$(document).ready(function() {
    var one = '<?= $one; ?>';
    var two = '<?= $two; ?>';
    var three = '<?= $three; ?>';
    if (one != '') {
        $('#one').val(one);
    }
    if (two != '') {
        $('#two').val(two);
    }
    if (three != '') {
        $('#three').val(three);
    }
});
$(document).on('change', '#three', function() {
    var form = $('#form');
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    form.attr('action', url);
    form.submit();
});
<form action="" method="POST" id="form">
    <select name="one" id="one">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select name="two" id="two">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select name="three" id="three">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</form>

现在应该按预期设置值。

相关文章：