我正在尝试使用约25个选项的选择下拉列表,某些选择的选项将使另一个文本框字段出现并且是必需的。我尝试将其显示为灰色并始终存在,但是由于未输入任何内容,因此仍然需要它并且不会进行处理。
现在,我已将其更改为只读,并且仅在框中填写了“不需要”,因为如果填写了必填字段,它将接受。
但是我真的很想学习如何使它仅在选择该选项时出现,并且一旦出现就使它成为必需,以便用户在填写完该页面之前无法进入下一页。
(如果您选择皮卡或卡车,则为必填项)
因此,基本上,下拉菜单使文本框在不显示时显示并为必需,而不是必需
有人对我该怎么做有任何想法吗?
http://jsfiddle.net/of1sdq11/
function GVW(){
var dropdown1 = document.getElementById('vehiclebody');
var textbox = document.getElementById('gvw');
if(dropdown1.selectedIndex == 0){
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 1) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
else if(dropdown1.selectedIndex == 2) {
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 3) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
else if(dropdown1.selectedIndex == 4) {
textbox.value = "";
document.getElementById("gvw").readOnly = false;
}
else if(dropdown1.selectedIndex == 5) {
textbox.value = "NOT REQUIRED";
document.getElementById("gvw").readOnly = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1" onChange="GVW();">
<option value="">Choose a Vehicle</option>
<option value="0">2Dr</option>
<option value="1">Pickup</option>
<option value="2">4dr</option>
<option value="3">Truck</option>
<option value="4">Convertible</option>
<option value="5">Van</option>
</select>
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="">
最佳答案
如果我对您的理解正确,那么您需要这样做,以便除非需要,否则文本框甚至不会显示。我对代码进行了一些修改,以使您不需要if语句列表。通过创建与selectedIndex对应的数组,您可以检查属性!
在这里找到jsFiddle:http://jsfiddle.net/of1sdq11/19/
首先,我使文本框开始隐藏。如果显示设置为无,则将不与表单一起提交。如果显示内容为空,它将显示并提交表单。如果您只希望始终提交一个不可见字段,则可以使用将可见性设置为隐藏!
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" style="display:none;">
然后,我修改了您的代码以在属性匹配时显示文本框。现在,您要做的就是在“ is_required”变量中设置required是true还是false,以匹配相应的selectedIndex,它应该可以工作。
function GVW(){
var dropdown1 = document.getElementById('vehiclebody');
var textbox = document.getElementById('gvw');
// Array for storing whether the textbox is required
var is_required = [false, true, false, true, false, true];
// If dropdown1.selectedIndex is 0, it will pull the value from the 0 slot
// of the is_required array
if(is_required[dropdown1.selectedIndex]) {
textbox.required = true;
textbox.style.display = "inline-block";
} else {
textbox.value = "";
textbox.required = false;
textbox.style.display = "none";
}
}
现在,在要提交到的任何页面上,您都可以检查文本框是否甚至存在于表单提交中,如果确实存在,则获取数据,否则跳过它!
带有修改的jQuery版本
与OP进行进一步讨论后,我将其重写为可与所有jQuery一起使用,此外还添加了隐藏标签的功能。我以为其他人可能会觉得有用,所以我想在这里发布。在这里找到小提琴:http://jsfiddle.net/of1sdq11/26/
HTML
<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1">
<option value="">Choose a Vehicle</option>
<option value="0">2Dr</option>
<option value="1">Pickup</option>
<option value="2">4dr</option>
<option value="3">Truck</option>
<option value="4">Convertible</option>
<option value="5">Van</option>
</select>
<div style="display:inline;">
<label for="gvw" style="display:none;"> Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" style="display:none;">
<p style="display:none;">*Gross Vehicle Weight is required for heavy trucks over 5000 lbs. Visit our website for more information. <a href="http://www.taxcollector.com/services_vehicle_heavy_truck.asp" target="_blank">Heavy Truck Information and Fee Schedule based on GVW</a> </p>
</div>
jQuery的
$(function() {
$('#vehiclebody').change(function() {
var selected_index = $(this).find(":selected").index();
var textbox = $('#gvw');
var label = textbox.siblings('label');
var paragraph = textbox.siblings('p');
// Array for storing whether the textbox is required
var is_required = [false, true, false, true, false, true];
// If dropdown1.selectedIndex is 0, it will pull the value from the 0 slot
// of the is_required array
if(is_required[selected_index]) {
textbox.attr("required", "true");
textbox.show();
label.show();
paragraph.show();
} else {
textbox.val("");
textbox.attr("required", "false");
textbox.hide();
label.hide();
paragraph.hide();
}
});
});