Question

我有以下HTML，这些HTML本质上是ul列表中的一些。

其中的li元素是根据ajax调用的结果动态生成的。

如果我将它们全部分开（每个UL的每个ID的change事件），它都可以正常工作。但这不是很干，而且似乎很浪费代码。

我的HTML是这样的：

<ul id="id_camp" class="registration-data-option">
    <li><label for="id_camp_0"><input type="radio" name="camp" value="1" class="registration-data-option" required="" id="id_camp_0"> Camp One</label></li>
    <li><label for="id_camp_1"><input type="radio" name="camp" value="2" class="registration-data-option" required="" id="id_camp_1"> Another Camp</label></li>
    <li><label for="id_camp_2"><input type="radio" name="camp" value="3" class="registration-data-option" required="" id="id_camp_2"> PE Camp</label></li>
</ul>
<ul id="id_class" class="registration-data-option">
    <li><label for="id_class_0"><input type="radio" name="class" value="1" class="registration-data-option" required="" id="id_class_0"> class One</label></li>
    <li><label for="id_class_1"><input type="radio" name="class" value="2" class="registration-data-option" required="" id="id_class_1"> Another class</label></li>
    <li><label for="id_class_2"><input type="radio" name="class" value="3" class="registration-data-option" required="" id="id_class_2"> PE class</label></li>
</ul>
<ul id="id_location" class="registration-data-option">
    <li><label for="id_location_0"><input type="radio" name="location" value="1" class="registration-data-option" required="" id="id_location_0"> location One</label></li>
    <li><label for="id_location_1"><input type="radio" name="location" value="2" class="registration-data-option" required="" id="id_location_1"> Another location</label></li>
    <li><label for="id_location_2"><input type="radio" name="location" value="3" class="registration-data-option" required="" id="id_location_2"> PE location</label></li>
</ul>

最初-显示的唯一选项是营地。然后，第二个UL从ajax调用返回。选择后，它应该显示第三个UL，等等。

我要完成的工作：

动态/链接下拉菜单系统，当用户选择第一个下拉菜单时，动态生成数据，因此会显示下一个下拉菜单。

我的jquery看起来像这样：

    $(".registration-data-option").change(function(event) {
        var target_id = $(event.target).closest('ul').attr('id') // id_camp, id_class, id_location
        var url = $("#registrationForm").attr("data-choices-update-url");
        var camp_id = $('#id_camp').find('input:checked').val()
        var class_id = $('#id_class').find('input:checked').val()
        var location_id = $('#id_location').find('input:checked').val()
        var person_id = $('#id_person').find(":selected").val()
        $.ajax({
            url: url, //this returns data - which is an HTML snippet
            data: {
                'target_id': target_id,
                'camp_id': camp_id,
                'class_id': class_id,
                'location_id': location_id,
                'person_id': person_id
            },
            success: function (data) {
                var class_html = $(data).get(0).innerHTML
                var location_html = $(data).get(2).innerHTML
                $("#id_class").html(class_html)
                $("#id_location").html(location_html)
                $(event.target).prop('checked',true)
            }
        });
    });

最后，从AJAX返回的HTML代码段如下所示：

<div id="classChoices">
    {% for class in classes %}
        <li>
            <label for="id_class_{{ forloop.counter }}">
                <input type="radio"
                    name="class"
                    class="registration-data-option"
                    value="{{ class.pk }}"
                    required
                    id="id_class_{{ forloop.counter }}">
                {{ class.name }}
            </label>
        </li>
    {% endfor %}
</div>

<div id="locationChoices">
    {% for location in locations %}
        <li>
            <label for="id_location_{{ forloop.counter }}">
                <input type="radio"
                    name="location"
                    class="registration-data-option"
                    value="{{ location.pk }}"
                    required
                    id="id_location_{{ forloop.counter }}">
                {{ location.name }}
            </label>
        </li>
    {% endfor %}
</div>

当前问题： 它仅部分起作用。如果选择“训练营”，则会显示相应的课程。点击课程后-将会显示相应的位置-但是课程被取消选中。如果您单击某个位置，那么由于未选择任何类别，所有内容都会消失。

只想弄清楚这一切。

Answer 1

您提到

”将显示适当的位置-但未选中班级。”

...这是因为无论如何都始终替换“类” HTML（使用$("#id_class").html(class_html)）。这将删除具有用户选择的单选按钮的HTML，并从服务器上使用完全品牌的HTML集合替换它，当然，其中不包含有关用户先前对其替换的HTML所做的操作的信息。

由于您已经获得了target_id信息，因此您可以使用它来知道每次需要替换哪些（位）HTML（例如，我认为如果目标是位置，则无需替换）类HTML）。

例如

if (target_id != "id_location") $("#id_class").html(class_html)

如果要在不可预测的层数上完全动态化，这当然是简单的。但是您知道了-必须使用当前上下文来决定如何处理HTML。

替代方法（代替上述方法）是更改服务器端代码，以便它使用您在AJAX参数中发送的class_id值来编写返回的HTML，从而使正确的单选按钮为已经通过标记进行了预先检查。

jQuery中的一键事件处理的多个UL

1 个答案: