Мастер с Javascript

Question

Я хочу создать мастера для этой формы таким образом, чтобы предоставить параметры второго ввода на основе параметра первого ввода

<form method="post" action="result.php">
<select>
    <option value="jean">jean</option>
    <option value="t-shirt">t-shirt</option>
</select>

<select>
    // if jean
    <option value="black">Black</option>
    <option value="blue">Blue</option>
    // if t-shirt
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
</select>
<button type="submit">See products</button>
</form>

Например, если пользователь выбрал футболку,он покажет ему доступные цвета этого предмета

Answer 1

Что-то вроде этого, вероятно, то, что вы ищете:

function updateColors(product) {
  document.getElementById("color").innerHTML = {
    "jean":    `<option value="black">Black</option>
                <option value="blue">Blue</option>`,
    "t-shirt": `<option value="yellow">Yellow</option>
                <option value="green">Green</option>`
  }[product];
}

window.onload = ()=>{updateColors("jean");}

<form method="post" action="result.php">
<select onchange="updateColors(this.value)">
    <option value="jean" selected>jean</option>
    <option value="t-shirt">t-shirt</option>
</select>

<select id="color"></select>
<button type="submit">See products</button>
</form>

• Функция updateColors принимает значение product, которое является значением первого поля выбора.Он использует это, чтобы выбрать, какие цвета показывать;и затем обновляет HTML-код этого поля.
• Мы вызываем updateColors, используя событие onchange первого поля выбора.Это событие вызывается всякий раз, когда пользователь выбирает элемент;так что изменение происходит сразу после.Из этого;Я передаю this.value - в этом контексте this относится к первому полю выбора, а value относится к атрибуту value выбранного тега <option>.
• Я дал второйполе выбора id, color, чтобы мы могли легко ссылаться на него и изменять его содержимое.
• document.getElementById("color") ссылается на второе поле выбора;поэтому мы можем изменить его свойства.
• Свойство .innerHTML используется для изменения HTML данного узла DOM (элемента на странице).Установив его, мы можем изменить содержимое HTML этого элемента.
• Тогда;Я использую словарь (известный как map на других языках).Это структура данных, которая сопоставляет ключи со значениями.Здесь jean является ключом, а затем значение HTML для цветов, которые входят в джинсы, является значением.Следовательно,мы можем получить этот HTML с учетом ключа.Аналогично, t-shirt - еще один ключ;который имеет другое значение.
• [product] используется для получения значения для данного ключа.Поэтому, если мы передадим jean, он вернет нам (в виде строки) значение HTML, которое мы установили в качестве ключа.Затем;это устанавливается как HTML-код для второго поля выбора с помощью innerHTML.
• window.onload = ()=>{updateColors("jean");}, которая вызывает эту функцию автоматически после завершения загрузки страницы.Это делается для того, чтобы форма имела смысл до того, как пользователь ее заполнит;поскольку jean выбрано по умолчанию, поэтому имеет смысл установить содержимое по умолчанию для второго поля выбора в качестве цветов для джинсов.

Answer 2

<form method="post" action="result.php">
<select id="selection" onclick="changeVal()">
    <option value="x">x</option>
    <option value="y">y</option>
</select>

<p id="output"> </p>

<script>
    function changeVal(){
    document.getElementById("output").innerHTML = document.getElementById("selection").value;
    }
</script>

Это достаточно простой скрипт, который я сделал.Вы можете построить это, чтобы создать мастера