居住着AJAX操纵下拉列表 [英] Manipulating dropdowns populated by AJAX

问题描述

jQuery是在好的和坏的Javascript时间我最好的朋友。然而，有些时候它需要一些搞清楚了我面前，我终于实现我的目标。这是这些日子之一。这他们我碰到了一定的问题，我真的不能找到在我的方式。我来试试下面的解释吧。

JQuery is my best friend in good and bad Javascript times. However, some times it takes some figuring out for me before I finally achieve my goal. This is one of these days. This they I bumped into a certain issue I can't really find my way around. I'll try explaining it below.

<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的负载下拉列表中两种。当下拉二是选择一个选项，JQuery的负载下拉列表中三种。

The issue

What I want to achieve is that when an option is selected in dropdown one, JQuery loads dropdown two. When an option is selected in dropdown two, JQuery loads dropdown three.

我已经得到了这个工作。然而，当下拉3被选择时，它确实刷新。但只要是刷新完成后，所有选择的值将被重新设置，另一个刷新将被触发。

I've got this working. However, when dropdown three is selected, it does a refresh. But as soon as that refresh is done, all select values would be set again and another refresh would be triggered.

我希望jQuery只刷​​新一次，之后刷新（从而触发选择下拉菜单的变化事件，并装载值），而不是当第三选择下拉列表值设置刷新设置的所有选择值。

I want JQuery to only refresh the first time, set all select values after the refresh (thus triggering the change event on the select dropdowns and loading the values) but not refreshing when the third select dropdown value is set.

如果我需要做更多的解释这个请让我知道。任何建议和帮助将是非常欢迎的。

If I need to do more explaining on this please let me know. Any suggestions and help would be very welcome.

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

我发现下面是工作。但是，它只设置第一个下拉列表。在第一个下拉列表中选择一个值触发Ajax调用加载了第二个选项。选择在第二个下拉选项下触发Ajax调用加载的第三个选项。有谁能告诉我更多关于如何去这一点，我在做什么错了？先谢谢了。

I've found the following to be working. However, it only sets the first dropdown. Selecting a value in the first dropdown triggers an ajax call that loads the options for the second one. Selecting an option in the second drop down triggers an ajax call that loads the options for the third one. Can somebody tell me more on how to go about this and what I'm doing wrong? Thanks in advance.

推荐答案

按照我上面的评论，使用PHP来设置HTML将选定的下拉值选择将属性同样的工作，消除您刷新的问题，这意味着价值的持久性作品，未经JS（无论你在乎那另当别论）：

As per my comment above, setting the selected dropdown value using PHP to set the HTML selected attribute would also work, eliminating your refresh problem and meaning that the value persistence works without JS (whether you care about that is a different matter):

<?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，以避免重复

As I mentioned, depending on what your data actually looks like (assuming it isn't just lists of numbers ;) you might be able to add some loops in your PHP to avoid repetition.

这篇关于居住着AJAX操纵下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！