javascript - 下拉菜单使文本框出现并且是必需的，不显示时则不需要

Question

我试图有一个包含大约 25 个选项的选择下拉列表，所选择的某些选项将使另一个文本框字段出现并成为必需的。我尝试将其设置为灰色并始终存在，但由于没有输入任何内容，因此仍然需要它并且不会处理。

现在我已将其更改为只读，并在框中写入“不需要”，因为它已填写，如果它是必填字段，它将接受。

但我真的很想学习如何让它在选择该选项时才出现，并且一旦出现就将其设为必需，这样用户在填写完毕之前无法进入下一页。

(如果您选择皮卡或卡车，则为必填项) 所以基本上 Dropdown 使文本框出现并且是必需的，而在不显示时则不需要

有人知道我该如何做到这一点吗？

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="">

Answer 1

如果我理解正确，那么除非需要，否则文本框甚至不会显示。我稍微修改了代码，这样您就不需要 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，并添加了隐藏标签的功能。我认为其他人可能会觉得它有帮助，所以我想将其发布在这里。在这里找到 fiddle :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();
       }
    });

 });