Question

我正在寻找（我认为是）一个简单的解决方案，我确信它在那里，但我似乎无法找到。

我正在做的是创建一个基于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>

小提琴：http://jsfiddle.net/8hdv3e5h/

Answer 1

我将分享的第一条信息是您可以在任何HTML元素中存储任意数据。那是什么意思？我会给你看！我们来看一个虚拟的<option>标签。（我假设您要显示的文本是选项标签的文本）

<option data-imgsrc='baseball_1.png'>Baseball Jersey</option>

使用此功能，您可以使用jquery或javascript设置处理程序，只要选择了某个选项，就会执行该处理程序。如果你愿意，我可以提供一些细节。然后，您可以像选择HTML中的任何其他属性一样提取data-imgsrc属性。它以字符串形式返回，您可以使用该字符串为您想要的任何图像元素设置src。

只要您知道如何为选择事件设置事件处理程序，那么您应该能够使用此技术来执行您想要执行的操作。

如果可以使用jquery，则分配处理程序是一项微不足道的任务。使用vanilla javascript，它仍然可行，但会更复杂一些。我相信你可以找到资源来找出其他方法。我希望这就是你要找的东西！

Answer 2

我能够弄清楚这一点。 Here is the Plunker

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<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 0 0 10px;
font-weight: 900;
width: 50px;
border-radius: 7px;
}

input.jersey_name {
color: #2a388f;
padding: 5px;
margin: 0 20px 0 0;
font-weight: 900;
width: 130px;
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;
}

.thumb {
width: 20px;
}

div.hide{
display: none;
}

#large-jersey-box-majors {
width: 300px;
height: 300px;
border: 2px solid #000000;
border-radius: 7px;
}

a.tooltip {outline:none;text-decoration: none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width: 450px; line-height:16px;
font-weight: 900;
}

a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

/*CSS3 extras*/
a.tooltip span
{
border-radius: 4px;
box-shadow: 5px 5px 8px #CCC;
}

img.jersey-example {

}

</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,#majors_07')
   ).map(e=>parseInt(e.value)||0)
   .reduce((a,b)=>a+b,0)
</script>

<script type="text/javascript">
function fade(div_id, button) {
    if(button.value == 'Hide Section') {
        $('#'+div_id).fadeOut('slow');
        button.value = 'Reveal Section';
    }
    else {
        $('#'+div_id).fadeIn('slow');
        button.value = 'Hide Section';
    }
}

$('div').fadeOut(1);
</script>

</head>
<body>

<table>
    <tr>
        <td>
<h2>Majors</h2>

<!-- Come back to this section
<form name="majors_01_jerseys" onsubmit="CheckForm()">
<select id="majors_01_jerseys" onchange="document.majors_01_jerseys.majors_01.value=this.value;fade('large-jersey-box-majors', this);">
<option value="">Select a Jersey Model</option>
<option value="30.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1751B/large-4P.jpg">Teamwork 1751B</option>
<option value="21.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1755B/large-1.jpg">Teamwork 1755B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1757B/large-15.jpg">Teamwork 1757B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/18/1825B/large-1.jpg">Teamwork 1825B</option>
<option value="29.90" data-src="http://www.majesticathletic.com/store/productimages/details/10754_columbia_blue_l_z.jpg">Majestic Cool Base 684Y</option>
<option value="32.54" data-src="http://www.uesports.com/imgrep/12107/image-440-0.jpg">UE B0173 (fully braided)</option>
</select>
$<input type="text" id="majors_01" onkeyup="sum()" name="majors_01"/>
-->

<h1>Jersey Builder</h1>
<p>Build your own jersey by choosing the options from the drop-down menu items. Be sure to "tab" through the fields so you can see the running total for your custom garment.

<form name="majors_01_jerseys" onsubmit="CheckForm()">
<select id="majors_01_jerseys" onchange="document.majors_01_jerseys.majors_01.value=this.value;">
<option value="" data-src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg">Select a Jersey Model</option>
<option value="30.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1751B/large-4P.jpg">Teamwork 1751B</option>
<option value="21.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1755B/large-1.jpg">Teamwork 1755B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/17/1757B/large-15.jpg">Teamwork 1757B</option>
<option value="27.00" data-src="http://www.teamworkathletic.com/media/img/product/18/1825B/large-1.jpg">Teamwork 1825B</option>
<option value="29.90" data-src="http://www.majesticathletic.com/store/productimages/details/10754_columbia_blue_l_z.jpg">Majestic Cool Base 684Y</option>
<option value="32.54" data-src="http://www.uesports.com/imgrep/12107/image-440-0.jpg">UE B0173 (fully braided)</option>
</select>
$<input type="text" id="majors_01" onkeyup="sum()" name="majors_01"/>

<script type="text/javascript">
$("#majors_01_jerseys").on('change', function(){
    $("#swap").attr("src", $(this).find(":selected").attr("data-src"));
});
</script>

</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="2.75" onkeyup="sum();">Left Chest Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Left Chest Silkscreen (three-color) - $4.75</option>
<option value="2.75" onkeyup="sum();">Wordmark Silkscreen (one-color) - $2.75</option>
<option value="3.75" onkeyup="sum();">Wordmark Silkscreen (two-color) - $3.75</option>
<option value="4.75" onkeyup="sum();">Wordmark Silkscreen (three-color) - $4.75</option>
<option value="3.75" onkeyup="sum();">Left Chest Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Left Chest Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Left Chest Heat Press (three-color) - $11.25</option>
<option value="3.75" onkeyup="sum();">Wordmark Heat Press (one-color) - $3.75</option>
<option value="7.50" onkeyup="sum();">Wordmark Heat Press (two-color) - $7.50</option>
<option value="11.25" onkeyup="sum();">Wordmark Heat Press (three-color) - $11.25</option>
</select>

<a href="#" class="tooltip">?<span><img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" />
<table align="center">
<tr>
<th colspan="2">Front Graphic Types</th>
</tr>
<tr>
<td><img src="https://csllbaseball.sharepoint.com/_layouts/15/guestaccess.aspx?docid=18ed0925ba5a14f539446eea820a62173&authkey=AbGQc20JIYaHPT8IF5rlnlI"></td><td>Left Chest</td>
</tr>
<tr>
<td><img src="https://csllbaseball.sharepoint.com/_layouts/15/guestaccess.aspx?docid=15e75308695b04b6395666ac4dbf7b20b&authkey=Ac2AiBm7WkDMocdSokDmelg"></td><td>Wordmark</td>
</tr>
</table>
</span>
</a>
&nbsp;&nbsp;&nbsp;
$<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="2.25" onkeyup="sum();">Yes (one-color) - $2.25</option>
<option value="7.00" onkeyup="sum();">Yes (two-color) - $7.00</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="2.25" onkeyup="sum();">Player Last Name - $2.25</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>

<form name="majors_07_youth_or_adult" onsubmit="CheckForm()">
<select onchange="document.majors_07_youth_or_adult.majors_07.value=this.value">
<option value="">Youth or Adult?</option>
<option value="0" onkeyup="sum();">Adult (no change)</option>
<option value="-4" onkeyup="sum();">Youth (subtract $4)</option>
</select>
$<input type="text" id="majors_07" onkeyup="sum()" name="majors_07"/>
</form>

Total: $<input type="text" id="result" disabled> Per garment (estimated).
        </td>
        <td>
<div id="large-jersey-box-majors" class="hide_come_back_and_rename">
<center><img id="swap" src="http://www.teamworkathletic.com/media/img/product/18/1852B/large-54.jpg" height=300></center>
</div>
        </td>
    </tr>
<!--    <tr>
        <td>
<h2>AAA</h2>

        </td>
        <td><div id="large-jersey-box-aaa" class="hide_come_back_and_rename">Jersey Here</div></td>
    </tr>
    <tr>
        <td>
<h2>AA</h2>

        </td>
        <td><div id="large-jersey-box-aa" class="hide_come_back_and_rename">Jersey Here</div></td>
    </tr>-->

</table>

</body>
</html>

不幸的是，代码中的某些东西已经关闭，因此它不会在JSFiddle或Plunker中渲染图像切换功能（读取：完全没有），但是Plunker更接近，所以我包含了工作模型的链接。如果有人想对它进行刺穿并使其在Plunker或JSFiddle中看起来很好，那将是值得赞赏的和rad。

无论哪种方式，我都能够实现在文本字段中填写价格并使用单个下拉选项更改图像的目标。我很满意结果。

还有一件我想做的事情并不能完全理解，但是我会玩它并且可能会回到这里并再次发布，因为它与此有关。

我确实有另一个小问题，但它与图片切换是分开的，所以我会为它做另一篇文章。

一个选择选项中的多个值

2 个答案: