Question

为了方便起见，我想拿一个工作表中使用的工作表并将其转换为Web应用程序。该工作表采用不同的犯罪和犯罪历史，并为每个犯罪提供分数。然后计算这些分数，然后将总分数用于确定是否被判犯有罪行的人将立即入狱。由于有多个值选项和我的基本知识，我在计算单独的变量以获取总数时遇到了一些困难。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<form>
   <fieldset>
    <legend>Drug Prison In/Out Worksheet</legend>
    <div id="drugMSCO">
      <label>Most Serious Conviction Offense</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option>Class A Offenses</option>
        <option value="8" class="form-control prc">Manufacturing Controlled Substance 1st Degree</option>
        <option>Class B Offenses</option>
        <option value="5" class="form-control prc">Manufacturing Controlled Substance 2nd Degree</option>
        <option value="5" class="form-control prc">Possession with Intent to Distribute Controlled Substance</option>
        <option value="6" class="form-control prc">Sale/Distribution of Marijuana</option>
        <option value="6" class="form-control prc">Sale/Distribution of Schedule I-V</option>
        <option>Class C Offenses</option>
        <option value="2" class="form-control prc">Felony DUI</option>
        <option value="2" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(1)</option>
        <option>Class D Offenses</option>
        <option value="1" class="form-control prc">Possession of Controlled Substance</option>
        <option value="1" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(2)</option>
      </select>
    </div>
    <br>
    <div id="drugNPAFC">
      <label>Number of Prior Adult Felony Convictions</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="2" class="form-control prc">1</option>
        <option value="3" class="form-control prc">2</option>
        <option value="5" class="form-control prc">3</option>
        <option value="6" class="form-control prc">4</option>
        <option value="7" class="form-control prc">5</option>
        <option value="7" class="form-control prc">6</option>
        <option value="7" class="form-control prc">7</option>
        <option value="7" class="form-control prc">8</option>
        <option value="7" class="form-control prc">9</option>
        <option value="7" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugNPACMV" >
      <label>Number of Prior Adult Convictions for Misdemeanors or Violations</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="0" class="form-control prc">1</option>
        <option value="1" class="form-control prc">2</option>
        <option value="1" class="form-control prc">3</option>
        <option value="1" class="form-control prc">4</option>
        <option value="1" class="form-control prc">5</option>
        <option value="2" class="form-control prc">6</option>
        <option value="2" class="form-control prc">7</option>
        <option value="2" class="form-control prc">8</option>
        <option value="2" class="form-control prc">9</option>
        <option value="3" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugPIUSI1YM">
      <label>Prior Incarcerations with Unsuspended Sentence Imposed of 1 Year or More</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">No</option>
        <option value="0" class="form-control prc">Yes</option>
      </select>
    </div>
    <br>
    <div id="drugPFPPR">
      <label>Prior Felony Probation or Parole Revocation</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0"  class="form-control prc">No</option>
        <option value="1"  class="form-control prc">Yes</option>
      </select>
    </div>
    <br>
    <div id="drugNPJDYOA">
      <label>Number of Prior Juvenile Delinquency or YO Adjudications (Violation/Misd/Felony)</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="1" class="form-control prc">1</option>
        <option value="1" class="form-control prc">2</option>
        <option value="2" class="form-control prc">3</option>
        <option value="2" class="form-control prc">4</option>
        <option value="3" class="form-control prc">5</option>
        <option value="3" class="form-control prc">6</option>
        <option value="3" class="form-control prc">7</option>
        <option value="3" class="form-control prc">8</option>
        <option value="3" class="form-control prc">9</option>
        <option value="3" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugPUDWDI">
      <label>Possession/Use of Deadly Weapon or Dangerous Instrument</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0">No</option>
        <option value="2">Yes</option>
      </select>
    </div>
    <div class="drug-in-out">
      <label>Total In/Out Worksheet Score</label>
      <br>
      <output id="drug-io-result"></output>
    </div>
  </fieldset>
</form>
<script src="jquery.min.js"></script> 
<script>
        $('.drug-in-out').on('input', '.prc', function(){
            var totalSum=0;
            $('.drug-in-out .prc').each(function()){
                var inputVal=$(this).val();
                if($.isNumeric(inputVal)){
                    totalSum += parseFloat(inputVal);
                }
                                        });
        $('#drug-io-result').val(totalSum);

        });

    </script>
</body>
</html>

我希望每个选择都能产生一个值，当与其他选择相加时，会在屏幕底部旁边弹出一个数字，但不会弹出任何数字。

Answer 1

需要一些更改：

将.on('input', ...)更改为.on('change', function(){...})
并用$('.drug-in-out .prc').each(...);更改$('.drug-in-out').each(...);
此外，为避免用户在select中选择“标题”，您可以像这样disable：

<option disabled>--- Class A Offenses ---</option>

请参见下面的演示：

已更新

根据注释进行更新，以根据计算出的总和显示预定对象数组中的建议值。

$(function() {
  $('.drug-in-out').on('change', function() {
    var totalSum = 0;
    $('.drug-in-out').each(function() {
      var inputVal = $(this).val();
      if ($.isNumeric(inputVal)) {
        totalSum += parseFloat(inputVal);
      }
    });

    $('#drug-io-result').val(totalSum);

    // lookup the recommended length based on guidelines
    var recommendationObject = thresholdLevels.find(function(element) {
      return isWithinRange(totalSum, element.min, element.max);
    });

    // build the output string
    var recommendationString = "Suggested Level: " + recommendationObject.level + " (" + recommendationObject.months + " months)";

    // display value on DOM
    $('#drug-io-recommendation').val(recommendationString);
  });

  // Define values for None(N), Low (L), Medium (M), High (H) thresholds
  // Please adjust these values as needed.
  var thresholdLevels = [{
      "min": 0,
      "max": 41,
      "level": "None",
      "months": 0
    },
    {
      "min": 42,
      "max": 74,
      "level": "Low",
      "months": 13
    },
    {
      "min": 75,
      "max": 109,
      /* or whatever the ceiling is here*/
      "level": "Medium",
      "months": 23
    },
    {
      "min": 110,
      /* or whatever the floor is here */
      "max": 381,
      "level": "High",
      "months": 32
    }
  ];

  // this function determines if X is within the ranges defined by min and max values
  var isWithinRange = function(x, min, max) {
    return x >= min && x <= max;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Drug Prison In/Out Worksheet</legend>
    <div id="drugMSCO">
      <label>Most Serious Conviction Offense</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option disabled>--- Class A Offenses ---</option>
        <option value="8" class="form-control prc">Manufacturing Controlled Substance 1st Degree</option>
        <option disabled>--- Class B Offenses ---</option>
        <option value="5" class="form-control prc">Manufacturing Controlled Substance 2nd Degree</option>
        <option value="5" class="form-control prc">Possession with Intent to Distribute Controlled Substance</option>
        <option value="6" class="form-control prc">Sale/Distribution of Marijuana</option>
        <option value="6" class="form-control prc">Sale/Distribution of Schedule I-V</option>
        <option disabled>--- Class C Offenses ---</option>
        <option value="2" class="form-control prc">Felony DUI</option>
        <option value="2" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(1)</option>
        <option disabled>--- Class D Offenses ---</option>
        <option value="1" class="form-control prc">Possession of Controlled Substance</option>
        <option value="1" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(2)</option>
      </select>
    </div>
    <br>
    <div id="drugNPAFC">
      <label>Number of Prior Adult Felony Convictions</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="2" class="form-control prc">1</option>
        <option value="3" class="form-control prc">2</option>
        <option value="5" class="form-control prc">3</option>
        <option value="6" class="form-control prc">4</option>
        <option value="7" class="form-control prc">5</option>
        <option value="7" class="form-control prc">6</option>
        <option value="7" class="form-control prc">7</option>
        <option value="7" class="form-control prc">8</option>
        <option value="7" class="form-control prc">9</option>
        <option value="7" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugNPACMV">
      <label>Number of Prior Adult Convictions for Misdemeanors or Violations</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="0" class="form-control prc">1</option>
        <option value="1" class="form-control prc">2</option>
        <option value="1" class="form-control prc">3</option>
        <option value="1" class="form-control prc">4</option>
        <option value="1" class="form-control prc">5</option>
        <option value="2" class="form-control prc">6</option>
        <option value="2" class="form-control prc">7</option>
        <option value="2" class="form-control prc">8</option>
        <option value="2" class="form-control prc">9</option>
        <option value="3" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugPIUSI1YM">
      <label>Prior Incarcerations with Unsuspended Sentence Imposed of 1 Year or More</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">No</option>
        <option value="0" class="form-control prc">Yes</option>
      </select>
    </div>
    <br>
    <div id="drugPFPPR">
      <label>Prior Felony Probation or Parole Revocation</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">No</option>
        <option value="1" class="form-control prc">Yes</option>
      </select>
    </div>
    <br>
    <div id="drugNPJDYOA">
      <label>Number of Prior Juvenile Delinquency or YO Adjudications (Violation/Misd/Felony)</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0" class="form-control prc">None</option>
        <option value="1" class="form-control prc">1</option>
        <option value="1" class="form-control prc">2</option>
        <option value="2" class="form-control prc">3</option>
        <option value="2" class="form-control prc">4</option>
        <option value="3" class="form-control prc">5</option>
        <option value="3" class="form-control prc">6</option>
        <option value="3" class="form-control prc">7</option>
        <option value="3" class="form-control prc">8</option>
        <option value="3" class="form-control prc">9</option>
        <option value="3" class="form-control prc">10 or More</option>
      </select>
    </div>
    <br>
    <div id="drugPUDWDI">
      <label>Possession/Use of Deadly Weapon or Dangerous Instrument</label>
      <br>
      <select class="drug-in-out">
        <option>Click Here to Select from List</option>
        <option value="0">No</option>
        <option value="2">Yes</option>
      </select>
    </div>
    <hr/>
    <div class="drug-in-out">
      <label>Total In/Out Worksheet Score:</label>
      <output id="drug-io-result"></output>
      <br>
      <label>Recommendation:</label>
      <output id="drug-io-recommendation"></output>
    </div>
  </fieldset>
</form>

计算具有变化值的多个div

1 个答案: