Javascript 隐藏/显示相同的div

我试图隐藏各种div元素，但我想使其成为动态的，因此如果取消选择，它将显示在浏览器中。使用show/hide很容易，但我的问题是我需要显示/隐藏一些相同的字段。它在第一次选择时起作用，但在第二次运行时它不会做任何事情，因为它认为它应该按照第一次运行中的“.show（）”来显示它

谁能给我指出正确的方向吗

谢谢 美国

$（文档）.ready（函数（）{
$（'#nat'）。on（'change'，function（）{
如果（this.value='no_nat'）
{
$（“#字段25”）.hide（）；
$（“#字段26”）.hide（）；
}
其他的
{
$（“#field25”）.show（）；
$（“#field26”）.show（）；
}
});
});
$（文档）.ready（函数（）{
$（'#nat2'）。on（'change'，function（）{
如果（this.value='no_nat'）
{
$（“#字段25”）.hide（）；
$（“#字段26”）.hide（）；
}
其他的
{
$（“#field25”）.show（）；
$（“#field26”）.show（）；
}
});
});

如下所示的HTML：

<div class="form-row">
   <label>
      <span>Test1</span>
      <select name="field1" id="nat">
         <option value="" selected="selected"></option>
         <option VALUE="no_nat">1</option>
         <option VALUE="nat">2</option>
      </select>
   </label>
</div>
<div class="form-row">
   <label>
      <span>Test2</span>
      <select name="field2" id="nat2">
         <option value="" selected="selected"></option>
         <option VALUE="no_nat">1</option>
         <option VALUE="nat">2</option>
      </select>
   </label>
</div>
<div class="form-row" id='field25'>
   <label>
   <span>Test3</span>
   <input name="field25" type="text">
   </input>
   </label>
</div>
<div class="form-row" id='field26'>
   <label>
   <span>Test4</span>
   <input name="field26" type="text">
   </input>
   </label>
</div>

测试1
1.
2.
测试2
1.
2.
测试3
测试4

您不需要定义$（文档）。准备两次。试试这个：

<script>
$(document).ready(function(){
    $('#nat').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });

    $('#nat2').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });
});
</script>

$（文档）.ready（函数（）{
$（'#nat'）。on（'change'，function（）{
如果（this.value='no_nat'）
{
$（“#字段25”）.hide（）；
$（“#字段26”）.hide（）；
}
其他的
{
$（“#field25”）.show（）；
$（“#field26”）.show（）；
}
});
$（'#nat2'）。on（'change'，function（）{
如果（this.value='no_nat'）
{
$（“#字段25”）.hide（）；
$（“#字段26”）.hide（）；
}
其他的
{
$（“#field25”）.show（）；
$（“#field26”）.show（）；
}
});
});

请参见小提琴试一试

$(this).val() === 'no_nat'

或

---

您可以尝试使用单个处理程序，如

$（文档）.ready（函数（）{
$（'select[name=“field1”]，select[name=“field2”]”）。在（'change'，function（）上{
变量状态=$（'select[name=“field1”]）.val（）='no|nat'|$（'select[name=“field2”]）.val（）='no|nat'；
$（“#字段25，#字段26”）。切换（状态）；
});
});

测试1
1.
2.
测试2
1.
2.
测试3
测试4
请提供完整的html，并告知id“nat”和“nat2”在哪里；事实上，我不明白你想表达什么
$(this).val() === 'no_nat'

$('#nat').val() === 'no_nat'