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，只需在hidden class上添加tr，否则删除。

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并使用以下代码获取值并添加或删除类。

navigationOptions

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
}

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>

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

3 个答案: