Question

我想知道如何通过下拉选项切换多个HTML字段。

让我们说我有3个选项的下拉菜单：Branch，Region，＆amp;司。

如果我选择分支，我希望在其下方显示3个字段：分支＃，网站＃，ID＃。

我很早就掌握了我的JavaScript知识，所以我将其设置为这样，但它无法正常工作：

$('select[name=YourLocation]').change(function () {
    if ($(this).val() == 'Branch') {
        $('#BranchNum').show();
    } else {
        $('#BranchNum').hide();
    }
    if ($(this).val() == 'Branch') {
        $('#SiteNum').show();
    } else {
        $('#SiteNum').hide();
    }
    if ($(this).val() == 'Branch') {
        $('#IDNum').show();
    } else {
        $('#IDNum').hide();
    }
});

和CSS：

#BranchNum {
    display: none;
}

#SiteNum {
    display: none;
}

#IDNum {
    display: none;
}

有关如何重新构建JavaScript以帮助我在下拉列表中进行选择时切换所有3个字段的任何帮助都会有很大帮助！提前谢谢。

这是下拉列表的HTML：

<div class="col-md-3">
    <div class="form-group">
        <label>Your Location</label>
        <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
            <option value="" disabled selected>Select Your Location</option>
            <option value="Branch">Branch</option>
            <option value="Region">Region</option>
            <option value="Division">Division</option>
        </select>
    </div><!-- /.form-group -->
</div><!-- /.col -->

隐藏字段的HTML：

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="BranchNumber" placeholder="Branch #" id="BranchNum">
    </div>
</div><!-- /.col -->

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="SiteNumber" placeholder="Region #" id="SiteNum">
    </div>
</div><!-- /.col -->

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="IDNumber" placeholder="Division #" id="IDNum">
    </div>
</div><!-- /.col -->

Answer 1

您可以使用类而不是ID来简化此操作：

＆＃13;

$('select[name=YourLocation]').change(function() {
  if ($(this).val() == 'Branch') {
    $('.BranchInfo').show();
  } else {
    $('.BranchInfo').hide();
  }
});

＆＃13;

.BranchInfo {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3">
  <div class="form-group">
    <label>Your Location</label>
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Your Location</option>
      <option value="Branch">Branch</option>
      <option value="Region">Region</option>
      <option value="Division">Division</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="BranchNumber" placeholder="Branch #" id="BranchNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="SiteNumber" placeholder="Region #" id="SiteNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="IDNumber" placeholder="Division #" id="IDNum">
  </div>
</div>

＆＃13;

您想要做的是将类BranchInfo添加到您要隐藏/显示的每个元素，然后jQuery脚本将立即切换所有这些元素。

Answer 2

将您的代码与所有if / else语句合并为一个，我们就有了这个。

 $("select[name='YourLocation']").on("change", function() {
   console.log($(this).val())
   if ($(this).val() == 'Branch') {
     $('#BranchNum').show();
     $('#SiteNum').show();
     $('#IDNum').show();
   } else {
     $('#BranchNum').hide();
     $('#SiteNum').hide();
     $('#IDNum').hide();
   }
 });

#BranchNum,
#SiteNum,
#IDNum {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="form-group">
    <label>Your Location</label>
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Your Location</option>
      <option value="Branch">Branch</option>
      <option value="Region">Region</option>
      <option value="Division">Division</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control" name="BranchNumber" placeholder="Branch #" id="BranchNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control" name="SiteNumber" placeholder="Region #" id="SiteNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control" name="IDNumber" placeholder="Division #" id="IDNum">
  </div>
</div>
<!-- /.col -->

Answer 3

从你的代码看起来你正在使用jquery。您可以使用jquery .show()来显示要显示的元素，并使用.hide()在if块中满足条件时隐藏其他两个元素。

类似的东西：

 if(conditions) {
    $('#elementToShow').show();
    $('#elementTohide1').hide();
    $('#elementTohide').hide();
 }

对其他元素的正确条件也一样。

如何切换多个隐藏字段以通过CSS＆amp; amp; JavaScript的？

3 个答案: