0

ここにサンプルサイトがあります。

ドキュメントの下部に、「潜在的な Gen Ed TOC」というラベルの付いたセクションがあります。

コンポジションというラベルの付いたアコーディオンを開くと、右側にドロップダウン メニューが表示されます。

ご覧のとおり、この 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 のチェックボックス トリガーを排除することです。「Credits - Select Credit」というドロップダウン メニューに置き換えました。

誰かが値を選択するたびに、その値に基づいて「潜在的な 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

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 属性はページ内で一意である必要があります。また、一部の入力には同じ名前が付けられています。つまり、フォームで送信される値は 1 つだけです。入力名に配列を使用して、複数の値を送信できます。

于 2013-07-19T17:15:45.743 に答える