我有一个下拉列表，其中根据数字选择列出了用户数量。因此，假设他们从列表中选择了“ 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设置为应该根据数字选择显示/隐藏文本字段的位置，但是它对我不起作用-所有帮助将不胜感激。
答案 0 :(得分：3)
Jerdine Sabio的答案有效，但是如果您想以更优雅的方式编写它，则可以在system("Rscript fit_model.csv")语句中做到这一点：
代替：
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情况下的所有代码。
答案 1 :(得分：2)
我注意到的第一件事是错误的jquery选择器。您可以使用 $（“＃ID”）通过其ID选择元素。
.each也不是必需的，您可以通过 $（“＃ID”）。val（）访问选定对象的value属性。
使用 switch case 而不是使用多个If语句似乎更合适，因为那里有很多条件。
运行该代码段，谢谢！编辑：放置Csaba的切换案例脚本，更整洁！
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>