Я ищу (что я думаю) простое решение, которое, я уверен, есть, но я просто не могу найти.Несколько значений из одного варианта выбора
Что я делаю, это создание инструмента цитирования на основе HTML. В настоящее время у меня это так, что, когда пользователь выбирает параметр из раскрывающегося списка, заполняется текстовое поле. То, что я хотел бы иметь этот вариант выбора, это заполнить текстовое поле AND отображение изображения. Например, пользователь выбирает опцию бейсбольного трикотажа, а в текстовом поле вы видите цену, в то время как в div (или пролете или что-то в этом роде), который высаживается в другом месте на странице, вы видите изображение трикотажа. С каждым другим вариантом вы видите другую цену в текстовом поле и другое изображение в div/span.
Я видел вещи на этом форуме, которые приближаются, но они либо немного отличаются от того, что я пытаюсь выполнить, либо они недостаточно полны для меня, чтобы понять (например, пропустить некоторый код, чтобы сделать всю вещь Работа). Было бы высоко оценено любое руководство или ссылка на решение.
Спасибо.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: sans-serif;
}
table, tr, td {
border: 1px solid #000;
}
tr:nth-child(even) {background: #efefef}
tr:nth-child(odd) {background: #ffffff}
td {
padding: 15px;
}
form {
display: inline-block;
}
input {
color: #2a388f;
padding: 5px;
margin: 0 20px 0 0;
font-weight: 900;
width: 50px;
border-radius: 7px;
}
input:hover {
background: #efefef;
border: 2px solid #000;
}
input:focus {
color: #474747;
background: #efefef;
}
#result {
width: 100px;
color: #2a388f;
font-weight: 900;
font-size: 1.75em;
}
</style>
<script type="text/javascript">
window.sum=() =>
document.getElementById('result').value=
Array.from(
document.querySelectorAll('#majors_01,#majors_02,#majors_03,#majors_04,#majors_05,#majors_06')
).map(e=>parseInt(e.value)||0)
.reduce((a,b)=>a+b,0)
</script>
</head>
<body>
<table>
<tr>
<td>
<h2>Majors</h2>
<form name="majors_01_jerseys" onsubmit="CheckForm()">
<select onchange="document.majors_01_jerseys.majors_01.value=this.value">
<option value="">Select a Jersey Model</option>
<option value="30.00" onkeyup="sum();">Teamwork 1751B</option>
<option value="21.00" onkeyup="sum();">Teamwork 1755B</option>
<option value="27.00" onkeyup="sum();">Teamwork 1757B</option>
<option value="27.00" onkeyup="sum();">Teamwork 1825B</option>
<option value="28.00" onkeyup="sum();">Majestic Cool Base</option>
</select>
$<input type="text" id="majors_01" onkeyup="sum()" name="majors_01"/>
</form>
<form name="majors_02_graphics" onsubmit="CheckForm()">
<select onchange="document.majors_02_graphics.majors_02.value=this.value">
<option value="">Select Front Graphics Options</option>
<option value="10.00" onkeyup="sum();">Left Chest (one-color) - $10</option>
<option value="14.00" onkeyup="sum();">Left Chest (two-color) - $14</option>
<option value="15.00" onkeyup="sum();">Wordmark (one-color) - $15</option>
<option value="16.00" onkeyup="sum();">Wordmark (two-color) - $15</option>
<option value="17.00" onkeyup="sum();">Wordmark (three-color) - $15</option>
</select>
$<input type="text" id="majors_02" onkeyup="sum()" name="majors_02"/>
</form>
<form name="majors_03_numbers_front" onsubmit="CheckForm()">
<select onchange="document.majors_03_numbers_front.majors_03.value=this.value">
<option value="">Front Numbers?</option>
<option value="0" onkeyup="sum();">No - $0</option>
<option value="3" onkeyup="sum();">Yes (one-color) - $3</option>
<option value="5" onkeyup="sum();">Yes (two-color) - $5</option>
</select>
$<input type="text" id="majors_03" onkeyup="sum()" name="majors_03"/>
</form>
<form name="majors_04_numbers_back" onsubmit="CheckForm()">
<select onchange="document.majors_04_numbers_back.majors_04.value=this.value">
<option value="">Select Back Number Options</option>
<option value="8" onkeyup="sum();">One-color - $8</option>
<option value="12" onkeyup="sum();">Two-color - $12</option>
</select>
$<input type="text" id="majors_04" onkeyup="sum()" name="majors_04"/>
</form>
<form name="majors_05_player_name" onsubmit="CheckForm()">
<select onchange="document.majors_05_player_name.majors_05.value=this.value">
<option value="">Select Player Name Options</option>
<option value="0" onkeyup="sum();">None - $0</option>
<option value="5" onkeyup="sum();">Player Last Name - $5</option>
</select>
$<input type="text" id="majors_05" onkeyup="sum()" name="majors_05"/>
</form>
<form name="majors_06_patch" onsubmit="CheckForm()">
<select onchange="document.majors_06_patch.majors_06.value=this.value">
<option value="">Little League Patch?</option>
<option value="1" onkeyup="sum();">Yes - $1</option>
<option value="0" onkeyup="sum();">No - $0</option>
</select>
$<input type="text" id="majors_06" onkeyup="sum()" name="majors_06"/>
</form>
Total: $<input type="text" id="result" disabled>
</td>
</tr>
<tr>
<td>
<h2>AAA</h2>
</td>
</tr>
<tr>
<td>
<h2>AA</h2>
</td>
</tr>
</table>
</body>
</html>
Fiddle: http://jsfiddle.net/8hdv3e5h/
Не могли бы вы его настроить, поэтому, когда значение выбора будет изменено, оно вызывает функцию, которая назначает значения как для текста, так и для значения изображения? –
Попробуйте себя и разместите код – Milaci
Пожалуйста, прочитайте [ask]. Ключевые фразы: «Поиск и ** исследование **» и «Объясните ... любые трудности, которые мешали вам самим решить». –