Как настроить поле формы, выбрав выпадающий список?
Если я выберу «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> <input type="text" name="title"> <br><br>
<label>Sub title </label> <input type="text" name="subtitle"> <br><br>
<label>Developed by </label> <input type="text" name="developer"> <br><br>
<label>Organization </label> <input type="text" name="organization"> <br><br>
<label>Description </label> <input type="textarea" name="description"> <br><br>
</body>
</html>Решение
Я сделал пример для выбора хрома. Вы можете расширить дальше для других браузеров. Документация в источнике.
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>Другие решения
Вот пример использования 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> <input type="text" name="title"> </li>
<li data-filter="Chrome,Firefox"><label>Sub title </label> <input type="text" name="subtitle"> </li>
<li data-filter="Opera,Firefox"><label>Developed by </label> <input type="text" name="developer"> </li>
<li data-filter="Internet Explorer"><label>Organization </label> <input type="text" name="organization"> </li>
<li data-filter="Internet Explorer"><label>Description </label> <input type="textarea" name="description"></li>
</ul>
</body>
</html>Вот еще один подход с использованием 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> <input type="text" name="title"> <br><br>
</div>
<div class="input firefox opera internet_explorer">
<label>Sub title </label> <input type="text" name="subtitle"> <br><br>
</div>
<div class="input firefox opera safari internet_explorer">
<label>Developed by </label> <input type="text" name="developer"> <br><br>
</div>
<div class="input chrome opera safari internet_explorer">
<label>Organization </label> <input type="text" name="organization"> <br><br>
</div>
<div class="input chrome firefox opera safari internet_explorer">
<label>Description </label> <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>
detector