根据具有多个对象的下拉选择显示/隐藏div

Question

我正在使用Rails生成一个表单，该表单允许用户使用添加按钮添加表单的实例。 表单的每个实例都包装在带有“字段”类的div标记中。 我想使用JS在每个表单实例中显示和隐藏div。

我正在努力找出为什么我的JS都无法正常工作的原因。

小提琴

# Structure of my HTML
<form>
    <div class="fields">
        <select class="type">
            <option value="business">Business</option>
            <option value="personal">Personal</option>
        </select>
        <div id="personal">
            <p>Business fields</p>
        </div>
        <div id="business">
            <p>personal fields</p>
        </div>
    </div>
    <div class="fields">
        <select class="type">
            <option value="business">Business</option>
            <option value="personal">Personal</option>
        </select>
        <div id="personal">
            <p>Business fields</p>
        </div>
        <div id="business">
             <p>personal fields</p>
        </div>
    </div>
</form>

# JS
$(function () {
  $(".fields").each(function() {
    $("#personal").hide();
    $("#business").hide();
    $('.type').on('change', function () {
      if (this.value === 'business'){
        $("#business").show();
      } else {
        $("#personal").hide();
      }
    });
  });
});

Answer 1

很简单：

$(".fields div:not(.business)").hide();

$('.type').on('change', function () {
    var x = this.value;
    $(this).siblings('div').not('.'+x).hide().siblings('.'+x).show();
});

顺便说一句，您的.personal div包含“业务”，反之亦然。 请正确设置该代码以使其正常工作。

JS小提琴演示