Question

我正在尝试使用大约25个选项进行选择下拉选择某些选项会使另一个文本框字段出现并且是必需的。我试着把它变成灰色并且总是在那里但是因为没有输入它仍然是必需的并且不会处理。

现在我已将其更改为只读，只是在框中写了Not Required，因为填写它会接受，如果它是必填字段。

但是我真的想学习如何在选择该选项时显示它，并且一旦显示它就需要它，这样用户就无法进入下一页，直到填写完为止。

（如果您选择皮卡或卡车，则需要）所以基本上Dropdown使文本框显示和需要，而不显示

时不需要

有没有人对如何做到这一点有任何想法？

 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/

首先，我让文本框开始隐藏。如果显示设置为none，则不会随表单一起提交。如果显示不是任何内容，它将显示并随表单一起提交。如果您只是想要一个始终提交的隐藏字段，您可以将可见性设置为隐藏！

<input type="text" name="gvw" id="gvw" onfocus="this.select()" message="Please enter gross vehicle weight." value="" style="display:none;">

然后，如果属性匹配，我修改了代码以显示文本框。现在你需要做的就是设置＆＃34; is_required＆＃34;中是否为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();
       }
    });

 });

Answer 2

这就是你需要的。检查这个小提琴 http://jsfiddle.net/of1sdq11/15/

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

 function GVW(){
   var dropdown1 = document.getElementById('vehiclebody');
   var textbox = document.getElementById('gvw');
   if(dropdown1.selectedIndex == 0){
     textbox.value = "";
       document.getElementById("gvw").hidden = false;
      document.getElementById("gvw").required = "yes";
   } 
   else if(dropdown1.selectedIndex == 1) {
   textbox.value = "NOT REQUIRED";

    document.getElementById("gvw").hidden = true;
    document.getElementById("gvw").required = "no";
 }
 else if(dropdown1.selectedIndex == 2) {
    textbox.value = "";
    document.getElementById("gvw").hidden = false;
     document.getElementById("gvw").required = "yes";
 }
 else if(dropdown1.selectedIndex == 3) {
    textbox.value = "NOT REQUIRED";

    document.getElementById("gvw").hidden = true;
    document.getElementById("gvw").required = "no";
 } 
 else if(dropdown1.selectedIndex == 4) {
     textbox.value = "";
     document.getElementById("gvw").hidden = false;
     document.getElementById("gvw").required = "yes";
 } 
 else if(dropdown1.selectedIndex == 5) {
     textbox.value = "NOT REQUIRED";

     document.getElementById("gvw").hidden = true;
     document.getElementById("gvw").required = "no";
 } 
}

下拉列表使文本框显示和需要，不显示时不需要

2 个答案: