0

I'm trying to assign two values to a select option and select one or the other depending on the result of a subsequent radio button.

So for instance, in this example, I used 2 different shirts with two different prices depending on the size of the shirt you pick. I know this code doesn't work, probably because of the "value1" and "value2" but I am just putting it here to illustrate what I am trying to achieve.

http://jsfiddle.net/Shibi/o2hftb6e/3/

Any help would be great. Thanks!

HTML

<select id="shirts">
    <option>Choose shirt</option>
    <option value1="15" value1="20">Shirt 1</option>
    <option value1="20" value1="25">Shirt 2</option>
</select>
<div>
    <input type="radio" name="1" value="small" />Small
    <input type="radio" name="1" value="medium" />Medium</div>
<div id="priceSummary"></div>

JS

$('#shirts').on('change', function () {

    var selectedShirtText = $("#shirts :selected").text();
    var selectedShirtValue = $("#shirts :selected").val();

    $("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");

});
Improve this question
5
  • variables don't match and missing # in $("priceSummary") Commented Sep 14, 2014 at 15:14
  • thanks, what do you mean by the variables don't match ? Commented Sep 14, 2014 at 15:16
  • selectedShirtTextValue vs selectedShirtText Commented Sep 14, 2014 at 15:18
  • value1 is not a valid HTML attribute. Do you mean using value? Your approach to the scenario is also problematic — your design indicates that shirts 1 and 2 are possibly mutually exclusive options. Commented Sep 14, 2014 at 15:20
  • Right, I was just using value1 and value 2 to illustrate what I was hoping to achieve. And yes, in this particular snippet, shirts 1 and 2 are mutually exclusive. Commented Sep 14, 2014 at 15:23

3 Answers 3

Reset to default
3

Here are my suggestions to solve your problem:

  1. Listen to .change() event on both the <select> and radio buttons, because you will never know which one the user will select first.
  2. Instead of usingvalue1 and value2, use the HTML5 data- attribute to store prices of different sizes.
  3. When the .change() event is fired, sniff for the kind of shirt that is selected, and fetch the correct price of the size based on the data- attribute specified by the value of the radio button.
  4. Declare a default size so your price will not be undefined.

So your HTML would be:

<select id="shirts">
    <option value="">Choose shirt</option>
    <option value="Shirt 1" data-small="15" data-medium="20">Shirt 1</option>
    <option value="Shirt 2" data-small="20" data-medium="25">Shirt 2</option>
</select>
<div>
    <input type="radio" name="shirtSize" value="small" checked />Small
    <input type="radio" name="shirtSize" value="medium" />Medium
</div>
<div id="priceSummary"></div>

Here is the demo that works: http://jsfiddle.net/teddyrised/o2hftb6e/8/

$('#shirts, input[name="shirtSize"]').on('change', function () {

    var selectedShirtText = $("#shirts :selected").val();
    var selectedShirtValue = $("#shirts :selected").attr("data-" + $('input[name="shirtSize"]:checked').val());

    $("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");

});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@Shibi Made a slight change to the HTML: make sure you use an empty value for the first option, <option value="">Choose shirt</option>, so that the conditional statement in the last line of the JS will work properly. Also updated linked to new fiddle.
0

Just did a Fiddle with some adjustments

$('#shirts').on('change', function () {
  var selectedShirtText = $("#shirts :selected").text();
  var selectedShirtValue = $("#shirts :selected").val();
  var size = $("input[type='radio']:checked").val();
  var selectedShirtPrize = $("#shirts :selected").data("price" + size);
$("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtPrize) : "");
});

for HTML adjustment like

<option data-price1="15" data-price2="20" value="1">Shirt 1</option>

It's just an example that can be finalized - currently select small/medium and than Shirt1 or Shirt2, and the price will be retrieved from the matching data-price1 or data-price2 attribute of the selected option. You're right that it won't work assigning value1 and value2 attributes to the options as this won't be valid HTML. Just using data- attributes can solve this issue.

Updated Fiddle: Fiddle
In case no shirt is selected, no text / price will be displayed. Assigned value="0" to the default option:

<option value="0">Choose shirt</option>

and print text / price only in case if(selectedShirtValue !== 0)

Improve this answer

4 Comments

Great! This example, however, outputs selectedShirtPrize as $undefined when the radio button is selected AFTER the type of shirt in the dropdown. Any idea why ?
Sure, as mentioned it's just an example to be finalized, just wanted to check if that's an approach that would work for you. Question is how would you like the functionality to work? Should just no price be added in case the default "Please select a shirt" option is displayed?
Right, Terry gave a great alternative above but I am still curious as to know how I would go about doing it your way and only displaying a result if a value is selected in both the dropdown and the radio button.
Dont' mind. Just wanted to point out the usage of data- attributes to solve the issue with the multiple values; as the accepted answer also uses this, in addition cleaned up the approach of the click-events and provides proper informaton, I won't adjust my answer any further.
0

I have just added a new attribute name value1 which can act as another value depending on the size of shirt.

<select id="shirts">
    <option>Choose shirt</option>
    <option value1="15" value="20">Shirt 1</option>
    <option value1="20" value="25">Shirt 2</option>
</select>
<div>
    <input type="radio" name="1" value="small" />Small
    <input type="radio" name="1" value="medium" />Medium
</div>

JS

$('#shirts').on('change', function () {
var size=$("input[name=1]").val();
var selectedShirtText = $("#shirts :selected").text();
if (size=='large')
    var selectedShirtValue = $("#shirts :selected").val();
else
    var selectedShirtValue = $("#shirts :selected").attr('value1');

$("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");});

you can run this code here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.