javascript - 当父项中的选择发生更改时，如何重置依赖子项的值？

Question

我的表单中有一堆下拉菜单，我正在尝试重置那些不依赖于从“顶部”下拉菜单中选择的选项的下拉菜单。例如，有一个下拉菜单“性别:”，其中包含男性/女性和空白(默认)选项。

现在，当我第一次选择男性时，我会得到 child (下拉列表和字段)，当选择“男性”选项时会显示这些 child 。我继续添加信息，选择这些 child 的选项，当我结束时，如果我将“男性”更改为“女性”，我输入的所有信息(包括下拉 child 的选定选项)应重置为默认值，即。空白值。

所有这些下拉菜单都采用相同的形式，所以我不能直接调用

$('#form')[0].reset();

在他的身份证上。我尝试了一下，它不起作用，因为它也重置了父级。

HTML 看起来像这样

 <div id="questionsForm">
  <div id="question-6">
        <label>Gender:</label>
        <select>
            <option value="0"></option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>

    <div id="question-7">
        <label>Question that should be shown once male is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>

    <div id="question-8">
        <label>Question that should be shown once female is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <!-- Question which should be shown once female is selected and answer Yes in question 8 is picked -->
    <div id="question-9">
        <label>Question</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

编辑:我也有这样的 JSON:

        {
        "Id": 6,
        //dependant answer(s)
        "DependantAnswers": [{
                "QuestionId": 1,
                "answer": ""
            }]
        },
        {

        "Id": 7,
        //dependant answer(s)
        "DependantAnswers": [{
                "QuestionId": 6,
                "answer": "male"
            }]
        },
        {

        "Id": 8,
        //dependant answer(s)
        "DependantAnswers": [{
                "QuestionId": 6,
                "answer": "female"
            }
            ]
        },
        {

        "Id": 9,
        //dependant answer(s)
        "DependantAnswers": [{
                "QuestionId": 6,
                "answer": "female"
            },
            {
                "QuestionId": 8,
                "answer": "yes"
            }
        ]
    },

我根据 QuestionId 过滤问题，但对名为 toHideQuestions 的数组有不同的答案，当我尝试重置它们的值并隐藏它们时，它们只是被隐藏，但所选选项的值保持不变。这是我迭代的代码:

$.each(toHideQuestions, function (index, question) {
            $("#question-" + question.Id).val('');
            $("#question-" + question.Id).hide();

});

Answer 1

我会向您的 HTML 元素添加一些自定义属性，这些属性定义了依赖关系规则。这将允许更通用的代码。

结果如下:

$("#questionsForm select").click(function refreshVisibility() {
    $("[data-show-when]").each(function () {
        // Get selector that should return something for this question to
        // be visible.
        var question = $(this).attr('data-show-when');
        // Determine if current question should be cleared or visible:
        var visible = $(question).length > 0;
        // Clear if needed, and set visibility
        if (!visible) $('select', this).val('');
        $(this).toggle(visible);
    });
}).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionsForm">
    <div id="question-6">
        <label>Gender:</label>
        <select>
            <option value="0"></option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>

    <div id="question-7" data-show-when="#question-6 option:selected[value=male]">
        <label>Question that should be shown once male is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>

    <div id="question-8" data-show-when="#question-6 option:selected[value=female]">
        <label>Question that should be shown once female is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <!-- Question which should be shown once female is selected and answer Yes in question 8 is picked -->
    <div id="question-9" data-show-when="#question-8 option:selected[value=yes]">
        <label>Question</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

替代方案:带有规则的对象

在评论中您提到您有一个指定所有依赖关系规则的对象。在这种情况下，您不需要 HTML 属性，并且可以使用该对象来实现这些规则:

var rules = [{
    "Id": 7,
    //dependant answer(s)
    "DependantAnswers": [{
        "QuestionId": 6,
        "answer": "male"
    }]
}, {
    "Id": 8,
    //dependant answer(s)
    "DependantAnswers": [{
        "QuestionId": 6,
        "answer": "female"
    }]
}, {
    "Id": 9,
    //dependant answer(s)
    "DependantAnswers": [{
        "QuestionId": 6,
        "answer": "female"
    }, {
        "QuestionId": 8,
        "answer": "yes"
    }]
}];

$("#questionsForm select").click(function refreshVisibility() {
    rules.forEach(function (questionRule) {
        // Check if all dependencies have the needed answers:
        var show = questionRule.DependantAnswers.every(function (dependency) {
            return $('select', '#question-' + dependency.QuestionId).val() == dependency.answer;
        });
        // Get question element and set its visibility
        $('#question-' + questionRule.Id).toggle(show);
    });
    // Clear value of hidden questions:
    $("#questionsForm select").not(':visible').val('');
}).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionsForm">
    <div id="question-6">
        <label>Gender:</label>
        <select>
            <option value="0"></option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>

    <div id="question-7">
        <label>Question that should be shown once male is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>

    <div id="question-8">
        <label>Question that should be shown once female is selected</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    <!-- Question which should be shown once female is selected and answer Yes in question 8 is picked -->
    <div id="question-9">
        <label>Question</label>
        <select>
            <option value="0"></option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</div>