0

我这里有一个示例站点。

在文档的底部，有一个部分标记为“Potential Gen Ed TOC”。

如果您打开标有 Composition 的 Accordion，您会在右侧看到下拉菜单。

如您所见，在此 JavaScript 中，它基于复选框是否被激活。然后'Potential Gen Ed TOC'将根据分配的值显示一个数字。

$(function($) {
    var sum = 0;
    $('#CourseMenu :checkbox').click(function() {
        sum = 0;
        $('#CourseMenu :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);
    });
});

当您继续在不同课程中选中复选框时，将显示一个总和。

我现在要做的是消除 JS 中的复选框触发器。我已经用下拉菜单替换了它们，上面写着“信用 - 选择信用”。

每当有人选择一个值时，“Potential Gen Ed TOC”就会根据该值缓慢增加。

我假设我所要做的就是分配value="Any Number"并且 JavaScript 会接受它。

在 JavaScript（上图）中，我无法从下拉菜单中提取这些值。如您所见，JS 基于复选框。

一旦我能够从下拉菜单中提取值，我希望将这些值加起来，但永远不要显示高于 72 的数字，无论选择了多少总转移学分。

那有意义吗？

编辑：这里有一些标记来了解我试图从哪里提取值（下拉菜单）......

          <fieldset name = Comunication>
            <legend>Transfer Course Information</legend>
            <label for="School Int.">School Int.</label> 
            <input name="School Int." type="text" size="6" maxlength="6" /> &nbsp; 

            <label for="ID">ID</label>
            <input name="ID" type="text" id="ID" size="8" /> &nbsp; 

            <label for="Name">Name</label>
            <input name="Name" type="text" id="Name" size="25" />&nbsp;

            <label for="Grade">Grade</label>
            <input name="Grade" type="text" id="Grade" size="2" />&nbsp; 
            <label for="COM1"></label>

          <form id="form2" name="form2" method="post" action="">
            <label for="Credits">Credits</label>
            <select name="Credits" id="Credits">
              <option value="0">Select Credit</option>
              <option value="0.67">1 QtrCr.</option>
              <option value="1.33">2 QtrCr.</option>
              <option value="2.00">3 QtrCr.</option>
              <option value="2.67">4 QtrCr.</option>
              <option value="3.33">5 QtrCr.</option>
              <option value="4.00">6 QtrCr.</option>
              <option value="4.67">7 QtrCr.</option>
              <option value="5.33">8 QrtCr.</option>
              <option value="6.00">9 QtrCr.</option>
              <option value="6.67">10 QtrCr.</option>
              <option value="1">1 SemCr.</option>
              <option value="2">2 SemCr. </option>
              <option value="3">3 SemCr.</option>
              <option value="4">4 SemCr.</option>
              <option value="5">5 SemCr.</option>
              <option value="6">6 SemCr.</option>
              <option value="7">7 SemCr. </option>
              <option value="8">8 SemCr.</option>
              <option value="9">9 SemCr.</option>
              <option value="10">10 SemCr.</option>
            </select>       
          </form>
          Transferrable
          <input name="COM105" type="checkbox" id="COM1" />
4

3 回答 3

6 
 $('#total_potential').html(Math.min(sum,72));

将显示总和至 72，然后仅显示 72

于 2013-07-19T17:14:31.880 回答
1

以下是使用选择输入的方法：

$(function($) {
    $('#CourseMenu select').change(function() {
        var sum = 0;
        $('#CourseMenu select').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

     $('#total_potential').html(Math.min(sum,72));
    });
});

重要的提示

您的表单 HTML 标记存在一些严重问题。您在某些表示无效标记的元素中有重复的 id，id 属性在页面中必须是唯一的。此外，您的一些输入具有相同的名称，这意味着只有一个值将与表单一起提交。您可以在输入名称中使用数组来提交多个值。

于 2013-07-19T17:15:45.743 回答
0

怎么样：

if (sum <= 72) {
    $('#total_potential').html(sum);
} else {
    $('#total_potential').html("72");
}
于 2013-07-19T17:09:43.363 回答