堆栈内存溢出
  简体   繁体   English

一个选择选项中的多个值

[英]Multiple Values from One Select Option

 原文  2017-01-23 21:47:13  0   2    javascript/ selection/ option

问题描述

I'm looking for (what I think is) a simple solution that I'm sure is out there but I just can't seem to find. 我正在寻找（我认为是）一个简单的解决方案，我确定在那里，但是似乎找不到。

What I'm doing is creating an HTML-based quoting tool. 我正在做的是创建一个基于HTML的报价工具。 I currently have it so that when a user selects an option from the drop-down, a text field is populated. 我目前拥有它，以便当用户从下拉菜单中选择一个选项时，将填充一个文本字段。 What I would like to have this selection option do is populate a text field AND display an image. 我想要这个选择选项要做的是填充文本字段并显示图像。 An example is the user selects a baseball jersey option, and in the text field you see the price, while in a div (or a span or something like that) that is planted elsewhere on the page you see an image of the jersey. 一个示例是用户选择一个棒球服选项，然后在文本字段中看到价格，而在页面上其他位置植入的div（或跨度之类的东西）中，您看到该球衣的图像。 With each different option you see a different price in the text field and a different image in the div/span. 使用每个不同的选项，您会在文本字段中看到不同的价格，并在div / span中看到不同的图像。

I've seen things on this forum that come close, but they are either slightly different from what I am trying to accomplish or they're not complete enough for me to understand (eg missing some code to make the entire thing work). 我已经在这个论坛上看到了一些接近完成的内容，但是它们或者与我试图完成的内容略有不同，或者还不够完整，我无法理解（例如，缺少一些使整个功能正常工作的代码）。 Any guidance or linking to the solution would be greatly appreciated. 任何指导或与解决方案的链接将不胜感激。

Thank you. 谢谢。

Here's some code: 这是一些代码： 

<!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/ 小提琴： http : //jsfiddle.net/8hdv3e5h/

2 个解决方案

解决方案1
 1  2017-01-23 21:54:01

The first piece of information I'll share is that you can store arbitrary data in any HTML element. 我将分享的第一条信息是您可以将任意数据存储在任何HTML元素中。 What does that mean? 这意味着什么？ I'll show you! 我会给你看！ Let's look at a dummy <option> tag. 让我们看一个虚拟的<option>标记。 (im assuming the text you want to show is the text of the option tag) （假设您要显示的文本是选项标签的文本） 

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

With this, you can set a handler using jquery or javascript that executes whenever an option is selected. 这样，您可以设置使用jquery或javascript的处理程序，该处理程序在选择选项时执行。 I can provide some details for that if you want. 如果您愿意，我可以提供一些详细信息。 Then, you pull the data-imgsrc attribute like you would select any other attribute in HTML. 然后，像选择HTML中的其他任何属性一样，拉出data-imgsrc属性。 It gets returned as a string and you can use that string to set the src for whatever image element you want. 它以字符串形式返回，您可以使用该字符串为所需的任何图像元素设置src。

As long as you know how to set up an event handler for the selection event then you should be able to use this technique to do what you want to do. 只要您知道如何为选择事件设置事件处理程序，那么您就应该能够使用该技术来完成您想做的事情。

If you can use jquery, assigning the handler is a trivial task. 如果可以使用jquery，则分配处理程序是一项简单的任务。 With vanilla javascript, it's still doable but will be a bit more complicated. 使用香草javascript，它仍然可行，但会更加复杂。 I'm confident you can find the resources to figure out either method elsewhere. 我相信您可以找到在其他地方找出任何一种方法的资源。 I hope this is what you're looking for! 希望这就是您要寻找的！

解决方案2
 0  2017-01-27 20:50:14

I was able to figure this out. 我能够弄清楚这一点。 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>

Unfortunately something is off with the code so it doesn't render the image-switching function quite right (read: at all) in JSFiddle or Plunker, but Plunker comes closer so I'm including the link to the working model. 不幸的是，代码中出现了一些问题，因此在JSFiddle或Plunker中无法完全正确地显示图像切换功能（请阅读：一点也没有），但是Plunker离得更近，因此我包括了工作模型的链接。 If someone wants to take a stab at it and make it so that it looks good in Plunker or JSFiddle, that would be appreciated and rad. 如果有人想刺中它并使它在Plunker或JSFiddle中看起来不错，那将不胜感激。

Either way, I was able to accomplish the goal of populating a price in a text field AND changing an image with a single drop-down selection. 无论哪种方式，我都可以实现在文本字段中填充价格并通过单个下拉选择更改图像的目标。 I am happy with what I got as a result. 我对自己得到的结果感到满意。

There is one other thing I would like to do and can't quite figure out, but I will play with it and maybe come back here with the issue and post again because it is related to this. 我还有另外一件事想做，但我还不能完全弄清楚，但我会继续研究它，也许会再回到此问题并再次发布，因为它与此有关。

I do have another little issue, but it is separate from the image-switching so I will make another post for it. 我确实还有另一个小问题，但是它与图像切换是分开的，因此我将为此发表另一篇文章。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从多个获取值的问题 <select> / <option> - Issues getting values from multiple <select>/<option> 一个的多个值<option> - Multiple values for one <option> SELECT标记中具有多个值的选项？ - option in SELECT tag with multiple values? 将选择选项值从一种形式复制到另一种形式 - Copy select option values from one form to another 如何从javascript中的选择选项获取多个值？ - How to get multiple values from a select option in javascript? Javascript从多个选择框中获取值 - Javascript Get Values from Multiple Select Option Box 从多个选择下拉列表中获取选择的选项值 - Get selected option values from multiple select dropdown 从多个 select 选项框中选择值 - Jquery - Selecting values from multiple select option box - Jquery 如何从 jquery、js 或 html 中多次选择一个选项 - How to select one option multiple times from jquery,js or html React DOM - 具有多个表单<select>, 从另一个中删除选项</select>选择一个选项后 - React DOM - Form with multiple <select>, remove option from another <select> after choose one option
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM