Javascript 在父项中选择更改时，如何重置从属子项的值？

我有一个表单中的下拉列表，我试图重置那些不依赖于从顶部下拉列表中选择的选项。例如，有一个下拉列表性别：带有男/女和空白默认选项

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

所有这些下拉列表都是相同的形式，所以我不能直接调用

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

在他的id上。我试过了，但不起作用，因为它也重置了家长

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>

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

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

});

试试这个

$("#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();
   }
});

---

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

结果如下：

$Questions表单选择。单击函数刷新可见性{ $[数据显示时间].eachfunction{ //获取应将此问题的内容返回给的选择器 //可见。 var question=$this.attr'data-show-when'； //确定当前问题是否应清除或可见： 可见变量=$question.length>0； //如果需要，请清除，并设置可见性 如果！可见$'select'，this.val； $this.togglevisible； }; }。单击； 性别： 男性的 女的 选择男性后应显示的问题 对 不 选择女性后应显示的问题 对 不 问题 对 不

---

如您所见，在注释中讨论代码并不理想。您可以在问题中添加此信息。没问题。我添加了一个基于该规则对象的解决方案。

$("#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();
   }
});