比较选择选项

Question

我试图比较两个选择选项的值，并根据两个选择的选项显示第三个值。我在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() {