如何根据下拉选择显示和隐藏表单中的字段？

Question

我正在尝试创建一个表单，当下拉列表的某些元素被 selected 时，该表单将显示和隐藏表单的特定字段。

我目前找到了一种使用 CSS 隐藏它的方法，但我不确定您将如何使用 CSS 或 JavaScript 在删除特定值时取消隐藏它们下面的列表是 selected.

这是我目前得到的： HTML:

    <td><label for="ageRange">Age: </label><font color="red">*</font></td>
    <td><select name="ageRange" id="ageRange">
            <option value="0">Select</option>
            <option value="0-16">0-16</option>
            <option value="17-25">17-25</option>
            <option value="26-40">26-40</option>
            <option value="41-60">41-60</option>
            <option value="60+">61+</option>
        </select>
    </td>
</tr>
<tr>
    <td><label for="license" class="hidden">Driver's License: </label></td>
    <td><input type="test" name="license" id="license" class="hidden"><br></td>

CSS:

    input.hidden {
        display: none
    }
    label.hidden {
        display: none
    }

我希望字段 "Driver's License" 保持隐藏，除非在下拉列表 (ageRange) 中 select 除了 "Select" 和“0”之外的任何值-16."

Answer 1

尝试 onchange 并获取值并使用以下代码添加或删除 class。

function check(e){
  if(e.value != '0' && e.value != '0-16'){
      var lab = document.getElementById("licLab");
      lab.classList.remove("hidden");
      var txt = document.getElementById("license");
      txt.classList.remove("hidden");
  } else {
      var lab = document.getElementById("licLab");
      lab.classList.add("hidden");
      var txt = document.getElementById("license");
      txt.classList.add("hidden");
  }
}

input.hidden {
    display: none
}
label.hidden {
    display: none
}

<td><label for="ageRange">Age: </label><font color="red">*</font></td>
    <td><select name="ageRange" id="ageRange" onchange="check(this)">
            <option value="0">Select</option>
            <option value="0-16">0-16</option>
            <option value="17-25">17-25</option>
            <option value="26-40">26-40</option>
            <option value="41-60">41-60</option>
            <option value="60+">61+</option>
        </select>
    </td>
</tr>
<tr>
    <td><label for="license" class="hidden" id="licLab">Driver's License: </label></td>
    <td><input type="test" name="license" id="license" class="hidden"><br></td>

Answer 2

试试这个

$(document).ready( function(){
 $('.hidden').hide()
})

$('select').on('change',function(){
  if ((this.value == '0') || (this.value == '0-16')) {
    $('.hidden').hide()
  }
  else{
  $('.hidden').show()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <td><label for="ageRange">Age: </label><font color="red">*</font></td>
    <td><select name="ageRange" id="ageRange">
            <option value="0">Select</option>
            <option value="0-16">0-16</option>
            <option value="17-25">17-25</option>
            <option value="26-40">26-40</option>
            <option value="41-60">41-60</option>
            <option value="60+">61+</option>
        </select>
    </td>
</tr>
<tr>
    <td><label for="license" class="hidden">Driver's License: </label></td>
    <td><input type="test" name="license" id="license" class="hidden"><br></td>

Answer 3

这是您可以这样做的方法。只需通过下拉列表检查所选值并与值进行比较。如果 selectedValue 找到 0-16 只需在 tr 上添加 hidden class 否则删除。

document.getElementById("toHide").classList.add("hidden");

function myFunction(){
var selectedVal = document.getElementById("ageRange").value;
 if(selectedVal == "0-16" || selectedVal=="0" ){
   document.getElementById("toHide").classList.add("hidden");
    document.getElementById("license").value='';
  } else{
  document.getElementById("toHide").classList.remove("hidden");
    document.getElementById("license").value=selectedVal;
 }
}

.hidden {
        display: none
    }

<table border="2">
 <td><label for="ageRange">Age: </label><font color="red">*</font></td>
    <td><select name="ageRange" id="ageRange"  onchange="myFunction()">
            <option value="0">Select</option>
            <option value="0-16">0-16</option>
            <option value="17-25">17-25</option>
            <option value="26-40">26-40</option>
            <option value="41-60">41-60</option>
            <option value="60+">61+</option>
        </select>
    </td>
</tr>
<tr id="toHide">
    <td ><label for="license" >Driver's License: </label></td>
    <td ><input type="test"  name="license" value=""  id="license" ><br></td>
    </tr>
    </table>

如何根据下拉选择显示和隐藏表单中的字段？

How do you show and hide field in a form depending on drop-down selections?

html

javascript

css

forms

show-hide