Reputation: 25

Multiple Values from One Select 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. 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. With each different option you see a different price in the text field and a different image in the 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 (e.g. 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/

Upvotes: 0

Answers (2)

Brett Roby

Reputation: 25

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. 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.

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.

Upvotes: 0

minorcaseDev

Reputation: 191

The first piece of information I'll share is that you can store arbitrary data in any HTML element. What does that mean? I'll show you! Let's look at a dummy <option> tag. (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. 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. It gets returned as a string and you can use that string to set the src for whatever image element you want.

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. With vanilla javascript, it's still doable but will be a bit more complicated. I'm confident you can find the resources to figure out either method elsewhere. I hope this is what you're looking for!

Upvotes: 1

Multiple Values from One Select Option

Answers (2)

Related Questions