Как настроить поле формы, выбрав выпадающий список? - PullRequest
Новая
       1

Как настроить поле формы, выбрав выпадающий список?

0 голосов
/ 08 ноября 2018

Если я выберу «Chrome», то появятся только два поля формы. Если я выберу Firefox, то должны появиться 3 поля формы, а также. Как я могу это сделать? 

<!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>
<label>Title </label> &nbsp;<input type="text" name="title"> <br><br>
<label>Sub title </label> &nbsp;<input type="text" name="subtitle"> <br><br>
<label>Developed by </label> &nbsp;<input type="text" name="developer"> <br><br>
<label>Organization </label> &nbsp;<input type="text" name="organization"> <br><br>
<label>Description </label> &nbsp;<input type="textarea" name="description"> <br><br>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Вот пример использования jQuery. Сначала отображаются все поля, а затем поля фильтруются в зависимости от значений атрибута «фильтр данных». Фильтр происходит при «смене», поэтому вы должны нажать ввод или выйти из ввода. 

$(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>
0 голосов
/ 08 ноября 2018

Вот еще один подход с использованием 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>
0 голосов
/ 08 ноября 2018

Я сделал пример для выбора хрома.Вы можете расширить дальше для других браузеров.Документация в источнике. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...