使用jQuery从使用选择字段创建的公式中回显div中的文本

Question

我的网站上有一个费率计算器，其中包含一组简单的选择，如下所示：

<select name="room">
              <option value="Green">Green Room</option>
              <option value="Red">Red Room</option>
              <option value="Blue">Blue Room</option>
              <option value="Orange">Orange Room</option>
              <option value="Yellow">Yellow Room</option>
            </select></td>
            <td>
            and I rehearse 
            </td>
            <td>
            <select name="rehearsals">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
            </select>
            </td>
            <td>
            time per week for 
            </td>
            <td>
            <select name="hours">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
            </select>

我有一个jQuery脚本，看起来像这样：

<script>
    function displayVals() {
      var rehearsals = $("#rehearsals").val();
  var room = $("#room").val();
  var hours = $("#hours").val();

  var totalhours = (rehearsals * hours * 4);

    $("#rate-calculator").html("We recommend the " + room);

    if (totalhours <= 8) {
        $("#rate-calculator").html(" Bronze package each month.");
  }

    if (totalhours <= 16 && totalhours > 8) {
        $("#rate-calculator").html(" Silver package each month.");
  }

    if (totalhours <= 24 && totalhours > 16) {
        $("#rate-calculator").html(" Gold package each month.");
  }

    if (totalhours <= 42 && totalhours > 24) {
        $("#rate-calculator").html(" Diamond package each month.");
  }

  }

  $("select").change( displayVals );
  displayVals();

  </script>

但是它不起作用，我得到这个结果：

We recommend the undefined

我已经尝试了所有我能想到的，似乎没有任何效果。 我很高兴它至少打印了一些文本，但是在我看来，问题是由于我无法识别的某些原因未传递选择值。 如果我的JavaScript位于应该在其中打印文本的div中，这是一个问题吗？

Answer 1

根据您的要求，这里有一个例子：

正如我在评论中所说，您的选择器都按ID搜索元素，例如#rehearsals 。 但是，您的元素上没有任何id属性，只有name属性，这是完全不同的事情。

只需将HTML中的name属性替换为id ，如下所示：

<select id="rehearsal"> ...

对其他选择元素执行相同的操作。

既然您提到您是其中的新手，我会警告您（如果您尚未意识到） id属性必须是唯一的，否则您将遇到一些意外的行为。

另外，如果您确实要使用name属性，则可以在jQuery中使用常规属性选择器，如下所示：

$("[name='rehearsals'")

请注意，由于高度优化了ID搜索，因此选择此类型的速度可能会慢得多。