jQuery Join two form select elements into one valu

Question

I'm having a bit of an issue solving a jQuery form problem.

Basically I have to select fields that I need to combine and then change the value of the combined options into a new value.

So for example if a user chooses an option in select field A then another option is select field B, the two values are combined and then changed into an new value. Where that new value is posted to a hidden input field.

Here's my HTML:

<label>Option A</label>
<select id="option_a">
    <option value=""></option>
    <option value="Aa">Aa</option>
    <option value="Ab">Ab</option>
    <option value="Ac">Ac</option>
</select>
<br />
<label>Option B</label>
<select id="option_b">
    <option value=""></option>
    <option value="Ba">Ba</option>
    <option value="Bb">Bb</option>
    <option value="Bc">Bc</option>
</select>
<br />
Combined Option: <span id="new_option"></span>
<br />
New Price: <span id="new_price"></span>

And my jQuery:

var new_option = $('#option_a').val() + $('#option_b').val();
$("#new_option").text(new_option);
var new_price = '';
$(new_option).change(function() {
    switch ($(this).val()) {
    case "AaBa":
        new_price = "1";
        break;
    case "AaBb":
        new_price = "2";
        break;
    case "AaBc":
        new_price = "3";
        break;
    case "AbBa":
        new_price = "4";
        break;
    case "AbBb":
        new_price = "5";
        break;
    case "AbBc":
        new_price = "6";
        break;
    case "AcBa":
        new_price = "7";
        break;
    case "AcBb":
        new_price = "8";
        break;
    case "AcBc":
        new_price = "9";
        break;
    default:
        new_price = "0";
    }
    $("#new_price").text("$" + new_price);
    });
});

I'm able to get what I need working with one form select field, but it's the combination of two that is putting a wrench in my gears.

Any help would be greatly appreciated.

Cheers

Answer 1

Link to demo: http://jsfiddle.net/8YnWU/2/

$('#option_a, #option_b').change(function() {
   var val = $('#option_a').val() + $('#option_b').val(), 
             new_price;
   // set span
   $("#new_option").text(val);

    switch (val) {
    case "AaBa":
        new_price = "1";
        break;
    case "AaBb":
        new_price = "2";
        break;
    case "AaBc":
        new_price = "3";
        break;
    case "AbBa":
        new_price = "4";
        break;
    case "AbBb":
        new_price = "5";
        break;
    case "AbBc":
        new_price = "6";
        break;
    case "AcBa":
        new_price = "7";
        break;
    case "AcBb":
        new_price = "8";
        break;
    case "AcBc":
        new_price = "9";
        break;
    default:
        new_price = "0";
    }

    $("#new_price").text("$" + new_price);
});

Answer 2

your $(new_option).change(function() never will fire and what does $(this).val() refer to, a text value? val() is only for form elements