我正在寻找(我认为是)一个简单的解决方案，我确信它就在那里，但我似乎找不到。
我正在做的是创建一个基于 HTML 的引用工具。我目前拥有它，以便当用户从下拉列表中选择一个选项时，会填充一个文本字段。我想让这个选择选项做的是填充一个文本字段并显示图像。一个例子是用户选择棒球 Jersey 选项，在文本字段中您会看到价格，而在页面其他位置的 div(或跨度或类似内容)中您会看到 Jersey 的图像。对于每个不同的选项，您会在文本字段中看到不同的价格，并在 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/
最佳答案
我要分享的第一条信息是您可以在任何 HTML 元素中存储任意数据。这意味着什么？我会给你看!让我们看一个假人 <option>标签。 (我假设您要显示的文本是选项标记的文本)
<option data-imgsrc='baseball_1.png'>Baseball Jersey</option>
有了这个，您可以使用 jquery 或 javascript 设置一个处理程序，该处理程序在选择选项时执行。如果您愿意，我可以提供一些详细信息。
然后，您拉出 data-imgsrc属性，就像您在 HTML 中选择任何其他属性一样。它以字符串形式返回，您可以使用该字符串为您想要的任何图像元素设置 src。
只要您知道如何为选择事件设置事件处理程序，那么您应该能够使用此技术来完成您想做的事情。
如果您可以使用 jquery，则分配处理程序是一项简单的任务。使用普通的 javascript，它仍然是可行的，但会更复杂一些。我相信您可以在其他地方找到资源来找出这两种方法。我希望这就是您正在寻找的!
关于javascript - 一个选择选项中的多个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41816272/