Question

我在搜索框上工作，该搜索框有三个不同的字段，根据用户的选择将填充ajax。

这是我的HTML：

<div id="states">
    <input type="checkbox" name="states[]" value="01">
    <label for="states">State 01</label>
    <input type="checkbox" name="states[]" value="02">
    <label for="states">State 02</label>
    ...etc...
</div>

<div id="prov">
    <input type="checkbox" name="provs[]" value="01">
    <label for="states">Prov 01</label>
    <input type="checkbox" name="provs[]" value="02">
    <label for="states">Prov 02</label>
    ...etc...
</div>

<div id="cities">
    <input type="checkbox" name="cities[]" value="01">
    <label for="states">City 01</label>
    <input type="checkbox" name="cities[]" value="02">
    <label for="states">City 02</label>
    ...etc...
</div>

当您选择第一组复选框时，第二组复选框将根据状态填充所有文件。因此，如果State 1有三个provs，那些provs显示。如果我也检查州2，那么州2的附加条件将附加到已经从州1中显示的那些。

然后对于城市来说同样的事情，它将向各个城市显示检查的文件。

我看这个问题：On unchecking a checkbox trigger an event并做了以下事情：

function(){
    var stateIds;
    var locUrl = $('#url');
    var $checks = jQuery('.dptoCheckbox').change(function () {
        stateIds= $checks.filter(':checked').map(function () {
            return this.value;
        }).get().join(',');
        console.log(stateIds);

        $.ajax({
            url: locUrl,
            async: false,
            type: "POST",
            data: "state_ids="+stateIds,
            dataType: "html",

            success: function(data) {
                $('#prov').html(data);          
            }
        });
    });

然后在我的控制器中，我使用States ID从DB检索provs。

到目前为止它工作得很好，唯一的问题是，因为我每次检查/取消选中一个字段时都会更新ajax调用。考虑一下这个清单：

州1
- Prov A
- Prov B
国家2
- Prov C
- Prov D

如果我检查状态1和状态2，则检查Prov A和Prov C.然后我决定我不再需要状态2.如果我取消选中状态2，则进行新的ajax调用并且provs列表更新。这首先导致Prov C消失（这是正确的行为），但是从状态1（Prov A）检查的所有值都重置。

我想知道是否有办法更新provs列表（以及稍后的城市列表）并且只删除uncheck State中的provs。保留其他被检查国家的所有其他证明。

感谢您阅读此内容，我希望我能够明确提出问题，但我不确定如何在不编写完整代码的情况下解释它（我尽量尽量减少它）。

Answer 1

这是我的猜测，但我还没有完全测试过，而且我也不是专业的javascript程序员。如果有任何错误，请告诉我。编辑：这是一个jsfiddle演示：http://jsfiddle.net/z590wdLo/3/

注意：这个答案被证明是错误的。删除不应存在的省份缺少代码。我没有删除它，因为它可能会稍微修改一下以便有用。

首先，你的HTML有点搞砸了。标签元素的主要目标之一是，当用户单击标签时，它会检查标签的框。写入标记的方式不允许这样做。你需要改变这个：

<div id="prov">
    <input type="checkbox" name="provs[]" value="01">
    <label for="states">Province 01</label>
    <input type="checkbox" name="provs[]" value="02">
    <label for="states">Province 02</label>
    ...etc...
</div>

对此：

<div id="prov">
    <label>
        <input type="checkbox" name="provs[]" value="01"/>
        Province 01
    </label>
    <label>
        <input type="checkbox" name="provs[]" value="02"/>
        Province 02
    </label>
    ...etc...
</div>

我在#states div上更改了此项，但您应该在所有内容上进行更改。请注意，我删除了for="states"属性，并将<input type="checkbox"...元素放在<label>元素中。

您还应该让服务器以JSON形式返回结果，并更改请求的数据类型以匹配。您可以使用json_encode()函数在PHP中执行此操作。我不确定你的JSON对象是否完全一样，所以你必须相应地修改代码。我将假设你有一个关联数组的数值数组，每个数组都包含项目provName和provID。

我还假设value="01"中的<input type="checkbox" name="provs[]" value="01">是provID，Prov 01中的<label for="states">Prov 01</label>是provName。< / p>

同样改变这个：

success: function(data) {
    $('#prov').html(data);          
}

对此：

success: function(data) {

    var province = [];
    var elements;

    //get the next element from the array and only continue if
    //there actually was something left to get
    while((province = data.pop) !== undefined) {

        //do not append the element if there already exists an element
        //is a descendent of div#prov,
        //is of the type input,
        //and has a value that matches the provinceID
        if($("div#prov input[value|='" + province.provID + "']") !== $()) {

            $('#prov').append('<label><input type="checkbox" name="provs[]" value="' + province.provID + '"/>' + province.provName + '</label>');

        }
    }
}

祝你好运。

Answer 2

有两种方法可以做到这一点：

1）控制服务器端的所有已选中复选框，并在每次AJAX调用时提供已检查的内容

2）在没有AJAX的情况下删除子复选框，你应该在每个省上添加一个具有状态依赖关系的类，并在每个城市添加一个具有省依赖关系的类。我认为这是更好的方法。

我将用一个例子解释第二个：

当用户检查状态01时，通过AJAX调用添加省12：

<input type="checkbox" name="provs[]" value="12" class="province_state_01">

当用户检查省12时，添加城市23：

<input type="checkbox" name="cities[]" value="23" class="city_province_12">

现在，如果用户取消选中省01，我们应该删除子城市，而不需要调用AJAX：

jQuery('#prov input').change(function () {
    if (!jQuery(this).is(':checked')) {
        province_unchecked = jQuery(this).val();
        jQuery('input.city_province_' + province_unchecked ).remove();
    } else {
        //Here you should add your AJAX call to add the cities
    }
});

现在，让我们对状态做同样的事情，我们应该为城市迭代：

jQuery('#states input').change(function () {
    if (!jQuery(this).is(':checked')) {
        state_unchecked = jQuery(this).val();
        jQuery('input.province_state_' + state_unchecked).each(function() {
            province_child = jQuery(this).val();
            jQuery('input.city_province_' + province_child ).remove();
            jQuery(this).remove();
        });
    } else {
        //Here you should add your AJAX call to add the provinces
    }
});

如何在取消选中复选框时删除值？

2 个答案: