Question

我在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>

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

Answer 1

你可以这样做：

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

Answer 2

试试这个：

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>

Answer 3

在选择标记

上添加一个更改后的监听器

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

如果你想在没有jquery的情况下做js：

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';
  }
}

Answer 4

您也可以使用此选项：

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

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

4 个答案: