jQuery 2つのフォーム選択要素を1つの値に結合し、スイッチを使用してその値を変更します。

Question

jQueryフォームの問題を解決するための問題が少しあります。

基本的に、私は結合する必要があるフィールドを選択してから、組み合わせたオプションの値を新しい値に変更する必要があります。

たとえば、ユーザーが選択フィールドAでオプションを選択すると、別のオプションがフィールドBを選択し、2つの値が結合されて新しい値に変更されます。その新しい値が非表示の入力フィールドに表示されます。ここで

は私の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); 
    }); 
}); 

私は、私は1つのフォーム選択フィールドでの作業に必要なものを得ることができるよ、それは2つの組み合わせです私の歯車にレンチを置く。

ご協力いただければ幸いです。

乾杯

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（関数（）火災ないと何$（これを行います決して）.val（）は、テキスト値を参照してください？ のval（）のみフォーム要素のためでありますデモへ