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包含＆＃34; Business＆＃34;反之亦然。 请正确设置以使代码生效。

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

1 个答案:

JS Fiddle Demo