根据jQuery中下拉列表中的数字选择添加输入字段

时间：2018-09-20 13:37:47

标签： javascript jquery html css twitter-bootstrap

对于我之前的问题，我已经正确切换了单选按钮，并且一切正常。请运行该代码段进行测试。

现在，在“团队”->“实时会话”下的下拉字段用于添加新输入，现在它不再起作用。

我的“与会者人数：”过去在单击“ 6”时运行良好，它将添加一个额外的输入框，并在再次单击“ 5”时将其删除。

任何人都可以看到我在做什么吗？

参考图片：

enter image description here

代码如下：

$(document).ready(function () {
	$('input[name=requestType]').click(function() {
		if(this.value == 'Team')
		{
			$(".total").show();
			$(".teamname").show();
			$(".one").show();
			$(".two").show();
			$(".three").show();
			$(".four").show();
			$(".five").show();
		}
		else
		{
			$(".teams").hide();
		}
	});
  	$('#remoteSession').click(function() {
  		if($('input[name=requestType]:checked').val() == 'Team')
  		{
  			$(".teams").hide();
    		$(".teamname").show();
    		$(".userCount").show();
  		}
  		else
  		{
  			$(".userCount").hide();
  		}
  	});
   	$('#singleUser').click(function() {
  		if($('input[name=sessionType]:checked').val() == 'Remote Session')
  		{
  			$(".userCount").hide(); 		
    	}
  	});
  	$('#liveSession').click(function() {
  		if($('input[name=requestType]:checked').val() == 'Team')
  		{
  			$(".one").show();
  			$(".two").show();
  			$(".three").show();
  			$(".four").show();
  			$(".five").show();
			$(".five").show();
			$(".total").show();
			$(".userCount").hide();
			$("#totalUsers").show();
  		}
	});
	
	$("#totalUsers").change(function() {
		$('.six').hide();
		$('.seven').hide();
		$('.eight').hide();
		$('.nine').hide();
		$('.ten').hide();
		
		var selectValue = $(this).val();
		
		switch (selectValue) {
		  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;
		}
	});
});
.teams, .userCount
{
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
 <div class="container form">
	<div class="form-group row">
	  <label for="requestType" class="col-form-label">Request Type:</label>
	  	<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
		<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
		
		<div class="help-block with-errors"></div>
	</div>
	
	<div class="form-group row">
	  <label for="sessionType" class="col-form-label">Session Type:</label>
	  	<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
		<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
		<div class="help-block with-errors"></div>
	</div>

	<div class="form-group row requester req">
	  <label for="requesterName" class="col-form-label">Requester Name:</label>
	  	<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
		<div class="help-block with-errors"></div>
	</div>


	<div class="form-group row teamname teams">
	  <label for="teamName" class="col-form-label">Team Name:</label>
	  	<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
	  	<div class="help-block with-errors"></div>
	</div>
	
	<div class="form-group row userCount">
	  <label for="userCount" class="col-form-label">Total Users:</label>
	  	<input class="form-control" name="userCount" type="number" id="userCount" data-minlength="2" data-error="Please enter a valid number." placeholder="Ex: 25" required/>
	  	<div class="help-block with-errors"></div>
	</div>

	<div class="form-group row teams total">
    	<label for="totalUsers" class="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 teams">
        <label for="oneUser" class="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 teams">
        <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 teams">
          <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 teams">
          <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 teams">
          <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 teams teams1">
          <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 teams teams1">
          <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 teams teams1">
          <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 teams teams1">
          <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 teams teams1">
          <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">
          <button type="button" 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='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
      </div>
   </div>
</form>

1 个答案:

答案 0 :(得分：1)

问题在您的switch语句中。
您已经分配了“六，七...”之类的选项值，但切换条件是“六，七...”
请记住，开关表达式区分大小写

修复：
将html中的值更改为所有小写字母（如6、7），或在每种切换情况下将首字母大写（6、7）

相关问题
最新问题