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（）仅适用于表单元素

jQuery将两个表单选择元素合并为一个值，然后使用switch更改该值

2 个答案: