JS - изменить скрытое поле «Значение» на основе раскрывающегося списка
Я работаю со следующей формой. Я не могу редактировать html. Это встроено в конструкторе целевых страниц.
<select id = "how_many_players" name = "how_many_players">
<option value = ""></option>
<option value = "1 to 10">1 to 10</option>
<option value = "11 to 20">11 to 20</option>
<option value = "21 to 30">21 to 30</option>
<option value = "31 to 40">31 to 40</option>
<option value = "41 to 50">41 to 50</option>
<option value = "50+">50+</option>
</select>
<input id = "Price" name = "Price" type = "hidden" class = "hidden" value = "$0.00">
Я ищу JS (?), чтобы изменить значение в скрытом поле «цена» на основе раскрывающегося списка параметров.
Пример: значение параметра от 1 до 10 = 100 долларов США.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы получаете скрытый элемент через его идентификатор, а затем меняете значение на значение выбранного параметра следующим образом:
document.getElementById('Price').value = document.getElementById('how_many_players').value
Обновлено:
Вероятно, вы захотите поместить его в прослушиватель событий изменения для выбора, чтобы значение изменялось при изменении выбора.
const selector = document.getElementById('how_many_players')
selector.addEventListener('change', function() {
document.getElementById('Price').value = selector.value
})
Тот пример кода, который вы отправляете в <script> и добавляете непосредственно перед </body>, ничего не делает. Есть ли что-то еще, что мне не хватает?
Я предположил, что вы знаете, как сделать все остальное. Я добавил код, с помощью которого значение цены изменяется при изменении значения выбора.
Да, вам нужно использовать небольшой javascript для этого, здесь я помещаю код для этого.
Я бы рекомендовал не использовать форматированные значения в качестве входных значений.
Разделите значения данных с отображаемыми значениями, только форматируйте значения для их отображения, а не в ваших функциях или данных реальных значений.
const select = document.getElementById("how_many_players");
const price = document.getElementById("Price");
const formattedValue = document.getElementById("formattedValue");
select.addEventListener("change", () => {
switch (select.value) {
case "1 to 10":
price.value = "$100";
formattedValue.innerText = "$100";
break;
case "11 to 20":
price.value = "$200";
formattedValue.innerText = "$200";
break;
case "21 to 30":
price.value = "$300";
formattedValue.innerText = "$300";
break;
case "31 to 40":
price.value = "$400";
formattedValue.innerText = "$400";
break;
case "41 to 50":
price.value = "$500";
formattedValue.innerText = "$500";
break;
case "50+":
price.value = "$700";
formattedValue.innerText = "$700";
break;
default:
price.value = "null";
formattedValue.innerText = "not valid";
break;
}
});<select id = "how_many_players" name = "how_many_players">
<option value = ""></option>
<option value = "1 to 10">1 to 10</option>
<option value = "11 to 20">11 to 20</option>
<option value = "21 to 30">21 to 30</option>
<option value = "31 to 40">31 to 40</option>
<option value = "41 to 50">41 to 50</option>
<option value = "50+">50+</option>
</select>
<input id = "Price" name = "Price" type = "hidden" class = "hidden" value = "$0.00">
<p id = "formattedValue"></p>Я обновил пример, проверьте его. Вам придется адаптировать этот пример к дополнительным параметрам настройки. У меня нет доступа к этому сайту, и я могу только дать вам примеры и рекомендации. Удачи!
Ты мой герой!
Код в моем ответе является примером и основан на вашем опубликованном коде. Итак, я не уверен, что вам еще нужно