Question

如果我选择“ Chrome”，则应该仅显示两个表单字段。如果我选择Firefox，则3个表单字段均应显示。我该怎么办？

Answer 1

我为选择铬做了一个例子。您可以进一步扩展其他浏览器。源中的文档。

const selected = document.getElementsByTagName('input')[0];
selected.addEventListener("change", () => {
  const browser = selected.value;
  
  /* Create an array with all elements having class = input */
  const allFields = [...document.getElementsByClassName("input")];
  /* Hide all fields */
  allFields.map(field => field.style.display = "none");
  
  /* Show the fields depending on browser selection */
  switch (browser.toLowerCase()) {
    case "chrome":
      /* Title, Organization & Description */
      document.getElementById("title").style.display = "block";
      document.getElementById("organization").style.display = "block";
      document.getElementById("description").style.display = "block";
      break;
    case "firefox":
      break;
    default:
      /* Any code that should run if no browser matches */
  }
});

.input {
  margin: 0 0 1rem 0; /* White space at bottom */
}

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" placeholder="Select" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
<br><br>
<div id="title" class="input">
  <label>Title </label><input type="text" name="title">
</div>
<div id="subtitle" class="input">
  <label>Sub title </label><input type="text" name="subtitle">
</div>
<div id="developed" class="input">
  <label>Developed by </label><input type="text" name="developer">
</div>
<div id="organization" class="input">
  <label>Organization </label><input type="text" name="organization">
</div>
<div id="description" class="input">
  <label>Description </label><input type="textarea" name="description">
</div>

Answer 2

这里是使用jQuery的示例。首先显示所有字段，然后根据“数据过滤器”属性值过滤字段。过滤是在“更改”时发生的，因此必须按Enter或保留输入。

$(document).ready(function(){
  $('input[name="myBrowser"').on('change', filterInputFields);
  
  function filterInputFields() {
    var value = $(this).val();
    
    $('.inputFields li').each(function() {
   
      var filterValue = $(this).data('filter');
      
      if (filterValue.indexOf(value) === -1) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  }
});

<!DOCTYPE html>
<html>
<head>
	<title>helo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" placeholder="Select" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
<br><br>
<ul class="inputFields">
  <li data-filter="Chrome,Firefox"><label>Title </label> &nbsp;<input type="text" name="title"> </li>
  <li data-filter="Chrome,Firefox"><label>Sub title </label> &nbsp;<input type="text" name="subtitle"> </li>
  <li data-filter="Opera,Firefox"><label>Developed by </label> &nbsp;<input type="text" name="developer"> </li>
  <li data-filter="Internet Explorer"><label>Organization </label> &nbsp;<input type="text" name="organization"> </li>
  <li data-filter="Internet Explorer"><label>Description </label> &nbsp;<input type="textarea" name="description"></li>
</ul>

</body>
</html>

Answer 3

这是使用jQuery和类的另一种方法：

<!DOCTYPE html>
<html>
<head>
    <title>helo</title>
</head>
<body>
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" placeholder="Select" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
<br><br>
<div class="input chrome firefox">
    <label>Title </label> &nbsp;<input type="text" name="title"> <br><br>
</div>
<div class="input  firefox opera internet_explorer">
    <label>Sub title </label> &nbsp;<input type="text" name="subtitle"> <br><br>
</div>
<div class="input  firefox opera safari internet_explorer">
    <label>Developed by </label> &nbsp;<input type="text" name="developer"> <br><br>
</div>
<div class="input chrome opera safari internet_explorer">
    <label>Organization </label> &nbsp;<input type="text" name="organization"> <br><br>
</div>
<div class="input chrome firefox opera safari internet_explorer">
    <label>Description </label> &nbsp;<input type="textarea" name="description"> <br><br>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("input[name=myBrowser]").on("change", function() {
            var class_name = $(this).val().replace(" ", "_").toLowerCase();
            $(".input").hide();
            $("." + class_name).show();

        });
    });
</script>
</html>

如何通过选择下拉列表来自定义表单字段？

3 个答案: