jQuery将两个表单选择元素连接成一个值，然后使用开关更改该值

我在解决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>

我能够通过一个表单选择字段获得所需的内容，但正是这两个字段的组合给我的工作带来了麻烦

任何帮助都将不胜感激

干杯

您的$（新选项）。更改（function（）永远不会启动，$（this）.val（）指的是什么，文本值？ val（）仅用于表单元素

您的$（新选项）。change（函数（）永远不会启动，$（this）.val（）指的是什么，文本值？ val（）仅用于表单元素

链接到演示：

链接到演示：

---

非常感谢，这正是我想要的。干杯！非常感谢，这正是我想要的。干杯！感谢你的澄清。我仍然掌握着JS的窍门。谢谢你的澄清。我仍然掌握着JS的窍门。

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);
    });
});

$('#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);
});