比較選擇選項

Question

我試圖比較兩個選擇選項的值，並根據兩個選定選項呈現第三個值。我發現this example on Stack Exchange：

但似乎無法得到它的工作。我自己的代碼如下：

$('#forest-size', '#forest-age').change(function() { 
      var val = $('#forest-size').val() + $('#forest-age').val(), 
     initial_crediting; 

     switch (val) { 

      case "A1" : 
       initial_crediting = "0 - 10"; 
       break; 

      case "A2" : 
       initial_crediting = "0 - 10"; 
       break; 

      case "B1" : 
       initial_crediting = "0 - 8"; 
       break; 

      case "B2" : 
       initial_crediting = "10 - 18"; 
       break; 

      case "B3" : 
       initial_crediting = "18 - 24"; 
       break; 

      case "C1" : 
       initial_crediting = "20 - 30"; 
       break; 

      case "C2" : 
       initial_crediting = "30 - 40"; 
       break; 

      case "C3" : 
       initial_crediting = "40 - 50"; 
       break; 
     } 

      $('#results').text(initial_crediting); 
     }); 
     </script> 

到目前爲止，我沒有顯示在#results的值，然而，我沒有看到在控制檯中的任何錯誤。任何建議將不勝感激。

謝謝！

Answer 1

請嘗試以下（Demo JSFiddle）：

HTML代碼

<label>Option A</label> 
<select id="forest-size"> 
    <option value=""></option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
</select> 
<br /> 
<label>Option B</label> 
<select id="forest-age"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
Results: <span id="results"></span> 

腳本

$('#forest-size, #forest-age').change(function() { 
    var val = $('#forest-size').val() + $('#forest-age').val(); 
    var initial_crediting = ''; 

    switch (val) { 
    case "A1": 
     initial_crediting = "0 - 10"; 
     break; 
    case "A2": 
     initial_crediting = "0 - 10"; 
     break; 
    case "A3": 
     initial_crediting = "not specified"; 
     break; 
    case "B1": 
     initial_crediting = "0 - 8"; 
     break; 
    case "B2": 
     initial_crediting = "10 - 18"; 
     break; 
    case "B3": 
     initial_crediting = "18 - 24"; 
     break; 
    case "C1": 
     initial_crediting = "20 - 30"; 
     break; 
    case "C2": 
     initial_crediting = "30 - 40"; 
     break; 
    case "C3": 
     initial_crediting = "40 - 50"; 
     break; 
    default: 
     initial_crediting = "please select both options"; 
    } 

    $("#results").text(initial_crediting); 
}); 

Answer 2

$('#forest-size', '#forest-age')選擇意味着#forest-size元素是#forest-age元素，或更好的孩子都明白的代碼工作像

$('#forest-age').find('#forest-size') 

，但要在兩個選擇附加事件，以便改變

$('#forest-size', '#forest-age').change(function() { 

到

$('#forest-size, #forest-age').change(function() {