当父母选择更改时，如何重置受抚养子女的值？

Question

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

现在，当我第一次选择男性时，我会在选择“男性”选项时显示子项（下拉菜单和字段）。我继续添加信息，选择这些孩子的选项，当我结束时，如果我将“男性”更改为“女性”，我输入的所有信息（包括下拉孩子的选择选项）都应重置为默认值，即。空白值。

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

$('#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>

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

在您提到的 cmets 中，您有一个指定所有依赖规则的对象。在这种情况下，您不需要 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>

Answer 2

试试这个

$("#question-6 select").change(function(){
   $("#question-7, #question-8, #question-9").hide();

   if($("option:selected",this).val() === "male")
   {
      $("#question-7").show();
   }
   else if($("option:selected", this).val() === "female")
   {
      $("#question-8, #question-9").show();
   }
});