当我在HTML中选择特定选项时，要消失的输入字段

Input field to disappear when I select a a specific option in HTML

本文关键字：消失 字段 输入 选项 HTML 选择      更新时间：2024-06-22

我有一个html格式的表单，我在这里发布了一个示例：

<html>
    <head></head>
    <body>
        <form>
         <p> <select name="job"> 
               <option type="text" selected disabled>Select Role</option>
               <option type="text" value="administrator">Administrator</option>
               <option type="text" value="manager">Manager</option>
               <option type="text" value="Candidate">Candidate</option>
             </select>
          </p>
          <p><input type="file"></p>
          <p><input type="submit" value="Create Account"></p>
         </form>
    </body>
</html>

选择Administrator时，如何使file字段消失？我已经尝试过禁用它，但这并不是我想要做的。

你可以做：

 $('select').on('change', function() {
   var types = ['manager', 'administrator'];
   if (types.indexOf(this.value) >= 0)
     $(':file').hide();
   else
     $(':file').show();
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <select name="job">
      <option type="text" selected disabled>Select Role</option>
      <option type="text" value="administrator">Administrator</option>
      <option type="text" value="manager">Manager</option>
      <option type="text" value="Candidate">Candidate</option>
    </select>
  </p>
  <p>
    <input type="file">
  </p>
  <p>
    <input type="submit" value="Create Account">
  </p>
</form>

在select标签中添加一个更改时侦听器

<select id="job" name="job" onchange="jsFunction()"> 
           <option type="text" selected disabled>Select Role</option>
           <option type="text" value="administrator">Administrator</option>
           <option type="text" value="manager">Manager</option>
           <option type="text" value="Candidate">Candidate</option>
</select>

如果你想在js中不使用jquery：

function jsFunction(){
  var myselect = document.getElementById("job");
  var lvl = ['manager', 'administrator'];
  if (lvl.indexOf(myselect.options[myselect.selectedIndex].value) >-1 )
  {
    myselect.style.display = 'none';
  }
  else
  {
    myselect.style.display = 'inline';
  }
}

试试这个：

var user = job.options[job.selectedIndex].value;
if(user === 'Administrator' || user === 'Manager') {
    file.outerHTML = "";
}

HTML:

<form>
     <p> <select id="job"> 
           <option type="text" selected disabled>Select Role</option>
           <option type="text" value="administrator">Administrator</option>
           <option type="text" value="manager">Manager</option>
           <option type="text" value="Candidate">Candidate</option>
         </select>
      </p>
      <p><input id="file" type="file"></p>
      <p><input type="submit" value="Create Account"></p>
     </form>

您也可以使用此替代方案：

$(document).ready(function() {
  $("select").change(function() {
    if ($('select option:selected').val() == "manager" || $('select option:selected').val() == "administrator") {
      $('input[type=file]').hide(); //hides the file input
    } else {
      $('input[type=file]').show(); //shows the file input if not manager or administrator
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <p>
    <select name="job">
      <option type="text" selected disabled>Select Role</option>
      <option type="text" value="administrator">Administrator</option>
      <option type="text" value="manager">Manager</option>
      <option type="text" value="Candidate">Candidate</option>
    </select>
  </p>
  <p>
    <input type="file">
  </p>
  <p>
    <input type="submit" value="Create Account">
  </p>
</form>

相关文章：