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

Question

我正在尝试创建一种表单，其中选择下拉列表的某些元素时，将显示并隐藏表单的特定字段。

我目前找到了一种使用 CSS 隐藏它的方法，但我不确定在选择下拉列表中的特定值时如何使用 CSS 或 JavaScript 取消隐藏它们。

这是我目前得到的： 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
    }

我希望“驾驶执照”字段保持隐藏状态，除非您在下拉列表 (ageRange) 中选择“选择”和“0-16”以外的任何值。

Answer 1

您可以这样做。只需通过下拉菜单检查所选值并与值进行比较。如果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>

Answer 2

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

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 3

试试这个

$(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>