jQuery Соединение двух элементов формы выбора в одно значение, а затем изменить это значение с помощью переключателя

Question

У меня возникла небольшая проблема, связанная с решением проблемы формы jQuery.

По сути, мне нужно выбрать поля, которые мне нужно объединить, и затем изменить значение объединенных параметров на новое значение.

Так, например, если пользователь выбирает опцию в поле выбора A, тогда другой опцией является поле выбора B, два значения объединяются, а затем изменяются на новое значение.Где это новое значение публикуется в скрытом поле ввода.

Вот мой 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>

И мой 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);
    });
});

Я могу получитьчто мне нужно, чтобы работать с одним полем выбора формы, но это комбинация из двух, что ставит гаечный ключ в мои шестерни.

Любая помощь будет принята с благодарностью.

Приветствия

Answer 1

Ссылка на демо: 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

ваш $ (new_option) .change (function () никогда не сработает, и что означает $ (this) .val (), текстовое значение? val () только для элементов формы