javascript - 根据下拉选择添加引导字段

Question

我有一个下拉列表，我根据数字选择列出用户数量。因此，假设他们从列表中选择了“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 设置为应该根据数字选择显示/隐藏文本字段的位置，但它对我不起作用 - 所有帮助将不胜感激。

标签： javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Answer 1

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;
    }

省略休息时间并使用直通：

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语句将执行 for 情况下的所有代码ten。