Question

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。当在下拉列表2中选择一个选项时，JQuery会加载下拉列表。

我有这个工作。但是，当选择下拉列表3时，它会刷新。但只要刷新完成，就会再次设置所有选择值，并触发另一次刷新。

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

如果我需要对此做更多解释，请告诉我。任何建议和帮助都会非常受欢迎。

进度

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

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

Answer 1

根据我上面的评论，使用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中添加一些循环以避免重复。

Answer 2

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

现在应该按预期设置值。

操纵AJAX填充的下拉列表

我的HTML

我的JQuery

PHP

问题

进度

2 个答案: