我正在尝试使用约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;">&nbsp;&nbsp;&nbsp;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.&nbsp;<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();
       }
    });

 });

10-05 20:27
查看更多