Javascript:使用下拉列表传递值

Question

我正在为视频游戏制作一个资源网站，虽然我有编程经验，但我对javascript一无所知，但我想在网站上放置一个“计算器”，需要下拉框和预设值。我有两个下拉列表，其中的值附加到选择，一旦选择，应该在旁边输出一个总值。总数将通过 v1 * 499 + v2 * 499 或 (v1 + v2) * 499 来实现(两者相同)。

我首先尝试让该框响应每个单独的框，但当然这只会单独更新每个框。

  $(document).ready(function() {
    $('select').material_select();
  });

$("[name=ilvl]").change(function(){
        var calc = ($(this).val()*499);
    $("[name=dps]").val(calc);
});

$("[name=trait]").change(function(){
        var calc = ($(this).val()*499);
    $("[name=dps]").val(calc);
});

(我在这里尝试过:jsfiddle1)

由于我无法弄清楚如何使用该格式将它们加在一起，因此我尝试使用不同的函数并像这样调用它们:

  $(document).ready(function() {
    $('select').material_select();
  });

function getilvldps()
{
    var ilvldps=0;
  var ilvl = $("#ilvl option:selected").val();
  ilvldps = ilvl * 499;
  return ilvldps;
}

function gettraitdps()
{
    var traitdps=0;
  var trait = $("#trait option:selected").val();
  traitdps = trait * 499;
  return traitdps;
}

function getTotal()
{
    var calc = getilvldps() + gettraitdps();
    $("#dps").val(calc);
}

(我在这里尝试过:jsfiddle2

我显然不知道如何使用 js 函数，需要一些帮助。

Answer 1

我修复了your jsFiddle并且还删除了下面的代码。

您的代码中存在多个错误，导致计算器无法工作。比较两个代码库，如果您有疑问，请在答案下方评论:

$(document).ready(function() {
  $('select').material_select();
});

var getilvldps = function(){
	var ilvldps=0;
  var ilvl = $("#ilvl option:selected").val();
  ilvldps = ilvl * 499;
  return ilvldps;
}

var gettraitdps = function(){
	var traitdps=0;
  var trait = $("#trait option:selected").val();
  traitdps = trait * 499;
  return traitdps;
}

var getTotal = function(){
	var calc = getilvldps() + gettraitdps();
	$("#dps").val(calc);
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="row">
  <form class="col s3">

    <select name="ilvl" id="ilvl" onchange="getTotal()">
      <option disabled selected value = 0>Item Level</option>
      <option id="1" value="1">845</option>
      <option id="2" value="2">850</option>
      <option id="3" value="3">855</option>
      <option id="4" value="4">860</option>
      <option id="5" value="5">865</option>
      <option id="6" value="6">870</option>
      <option id="7" value="7">875</option>
      <option id="8" value="8">880</option>
      <option id="9" value="9">885</option>
      <option id="10" value="10">890</option>
      <option id="11" value="11">895</option>
      <option id="12" value="12">900</option>
      <option id="13" value="13">905</option>
      <option id="14" value="14">910</option>
      <option id="15" value="15">915</option>
      <option id="16" value="16">920</option>
      <option id="17" value="17">925</option>
      <option id="18" value="18">930</option>
      <option id="19" value="19">935</option>
      <option id="20" value="20">940</option>
      <option id="21" value="21">945</option>
      <option id="22" value="22">950</option>
      <option id="23" value="23">955</option>
      <option id="24" value="24">960</option>
      <option id="25" value="25">965</option>
      <option id="26" value="26">970</option>
      <option id="27" value="27">975</option>
      <option id="28" value="28">980</option>
    </select>
  </form>

  <form class="col s3">
    <select name="trait" id="trait" onchange="getTotal()">
      <option disabled selected value = 0>Trait</option>
      <option id="1" value="31">CS Crit</option>
      <option id="2" value="10">DB Damage</option>
      <option id="3" value="8">Eye Beam Damage</option>
      <option id="4" value="6">Eye Beam Cost</option>
      <option id="5" value="5">Max Fury</option>
      <option id="6" value="5">Meta CD</option>
      <option id="7" value="1">Throw Glaive</option>
      <option id="8" value="0">Non-Damage</option>
    </select>
  </form>

  <form class="col s3">
    <input type=text name="dps" id="dps">
  </form>

</div>