根据下拉选择添加引导字段答案

【问题标题】：Adding Bootstrap Fields based on drop-down selection根据下拉选择添加引导字段
【发布时间】：2019-02-21 14:39:00
【问题描述】：

我有一个下拉列表，其中列出了基于数字选择的用户数量。所以假设他们从列表中选择了“7”个用户，它会显示两个额外的文本框等等。

代码如下：

	<script>
	jQuery(document).ready(function($){
	  $('select[name=totalUsers]').change(function () {
		$('.six').hide();
		$('.seven').hide();
		$('.eight').hide();
		$('.nine').hide();
		$('.ten').hide();
			
		$("select[name=totalUsers] option:selected").each(function () {
			var value = $(this).val();
			if(value == "six") {
				$('.six').show();
			
			} else if(value == "seven") {
				$('.seven').show();
			
			} else if(value == "eight") {
				$('.eight').show();
			
			} else if(value == "nine") {
				$('.nine').show();

			} else if(value == "tenUsers") {
				$('.ten').show();
			}
		});
	  });
  });
	</script>

<div class="container">
<form id="myform" data-toggle="validator">
  <fieldset>

	<div class="form-group row">
  		<label for="totalUsers" class="col-lg-10 col-form-label">Number of Attendees:</label>
  		<select class="form-control" id="totalUsers">
			<option value="five" selected>5</option>
			<option value="six">6</option>
			<option value="seven">7</option>
			<option value="eight">8</option>
			<option value="nine">9</option>
			<option value="ten">10</option>
  		</select><div class="help-block with-errors"></div>
	</div>
	
	<div class="form-group row one">
	  <label for="oneUser" class="col-lg-10 col-form-label">Names of Attendees:</label><input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row two">
	  <input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name."required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row three">
	  <input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row four">
	  <input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row five">
	  <input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row six">
	  <input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row seven">
	  <input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row eight">
	  <input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row nine">
	  <input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
	<div class="form-group row ten">
	  <input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/><div class="help-block with-errors"></div>
	</div>
		
	<div class="form-group row col-lg-8">
		<button type="submit" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
		<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href=''">Cancel</button>
	</div>

我已将我的 jQuery 设置为应该根据数字选择显示/隐藏文本字段的位置，但它对我不起作用 - 感谢所有帮助。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

我注意到的第一件事是不正确的 jquery 选择器。您可以使用 $("#ID") 通过其 ID 选择一个元素。

.each 也不是必需的，您可以通过 $("#ID").val() 访问所选对象的 value 属性。

使用 switch case 代替多个 If 语句看起来更合适，因为那里有很多条件。

请运行 sn-p， 谢谢！编辑：放置 Csaba 的 switch case 脚本，更整洁！

jQuery(document).ready(function($) {

  // Moved this to the top, this would hide the elements when the page is ready
  $('.six').hide();
  $('.seven').hide();
  $('.eight').hide();
  $('.nine').hide();
  $('.ten').hide();

  /* $('select[name=totalUsers]') is incorrect for this
example because the totalUsers is the ID. The correct way of selecting through ID is $("#totalUsers")*/
  $("#totalUsers").change(function() {

    // Hide them again, because some of them are shown at the end
    $('.six').hide();
    $('.seven').hide();
    $('.eight').hide();
    $('.nine').hide();
    $('.ten').hide();

    // Loop is not necessary, just get the value from the select field.
    var selectValue = $(this).val();

    // Use switch for cleaner code
    switch (selectValue) {
        case "ten":
          $('.ten').show();
        case "nine":
          $('.nine').show();
        case "eight":
          $('.eight').show()
        case "seven":
          $('.seven').show();
        case "six":
          $('.six').show();
        case "five":
          $('.five').show();
      }
    
  });
});

label {
  display: block;
}

select,
input {
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <form id="myform" data-toggle="validator">
    <fieldset>

      <div class="form-group row">
        <label for="totalUsers" class="col-lg-10 col-form-label">Number of Attendees:</label>
        <select class="form-control" id="totalUsers">
          <option value="five" selected>5</option>
          <option value="six">6</option>
          <option value="seven">7</option>
          <option value="eight">8</option>
          <option value="nine">9</option>
          <option value="ten">10</option>
        </select>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group row one">
        <label for="oneUser" class="col-lg-10 col-form-label">Names of Attendees:</label>
        <input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group row two">
        <input placeholder="Two" class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
        <div class="help-block with-errors"></div>

        <div class="form-group row three">
          <input placeholder="Three" class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row four">
          <input placeholder="Four" class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row five">
          <input placeholder="Five" class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row six">
          <input placeholder="Six" class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row seven">
          <input placeholder="Seven" class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row eight">
          <input placeholder="Eight" class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row nine">
          <input placeholder="Nine" class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row ten">
          <input placeholder="Ten" class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
          <div class="help-block with-errors"></div>
        </div>

        <div class="form-group row col-lg-8">
          <button type="submit" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
          <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href=''">Cancel</button>
        </div>

    </fieldset>
  </form>
  </div>

【讨论】：

非常感谢@Jerdine Sabio 的帮助！我将研究当您将其更改为六、七等时的问题。它只是替换文本而不添加文本框。
嗨@SaintLouisEvents，实际上，它不会替换文本。它隐藏了所有其他指定的 div，只在 switch 语句中显示匹配的类。是否需要根据选择值显示多个输入字段？
是的，这是正确的@Jerdine，所以假设我选择“5” - 我想显示 5 个输入字段、6 = 6 个输入字段等。然后当用户切换回 5 它只回到 5。我非常感谢所有的帮助。
嗨@SaintLouisEvents 我修改了代码以匹配您想要的行为。虽然有更好的方法来编写隐藏和显示，但要简单；我根据具体情况指定了我想要显示的所有 div。
@JerdineSabio 检查我的答案

【解决方案2】：

Jerdine Sabio 的答案有效，但如果您想以更优雅的方式编写它，则可以在 switch 声明中执行此操作：
而不是：

// Use switch for cleaner code
    switch (selectValue) {
      case "five":
        $('.five').show();
      case "six":
        $('.five').show();
        $('.six').show();
        break;
      case "seven":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        break;
      case "eight":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        break;
      case "nine":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        $('.nine').show();
        break;
      case "ten":
        $('.five').show();
        $('.six').show();
        $('.seven').show();
        $('.eight').show();
        $('.nine').show();
        $('.ten').show();
        break;
    }

省略中断并使用fall-through：

switch (value) {
    case "ten":
        $('.ten').show();
    case "nine":
        $('.nine').show();
    case "eight":
        $('.eight').show()
    case "seven":
        $('.seven').show();
    case "six":
        $('.six').show();
    case "five":
        $('.five').show();
}

这意味着如果您选择ten，那么switch 语句将执行ten 的所有代码。

【讨论】：

@SaintLouisEvents，啊，写好了，更好的写法。
在答案中包含了这个 sn-p
感谢改进的家伙！