Question

我正在制作一个视频游戏的资源网站，虽然我有编程经验，但我对javascript一无所知，但我想要一个计算器＆＃39;在网站上需要下拉框和预设值。我有两个下拉列表，其中包含附加到选项的值，如果选择了，则应将总值输出到侧面。总计将通过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>

Answer 2

在选择上使用on change事件，您可以在document.ready（）下添加它。我认为它会给你你想要的结果：

 $('select[name=ilvl],select[name=trait]').on('change', function(){
        getTotal();
  });

Answer 3

我不确切知道你在寻找什么，但它的功能是否与此相似？

运行下面的代码段会将两个选择列表的值一起添加。

$('#dropDownOne').on('change', function(e) {
  console.log(parseInt($(this).val()) + parseInt($('#dropDownTwo').val()));
});

$('#dropDownTwo').on('change', function(e) {
  console.log(parseInt($(this).val()) + parseInt($('#dropDownOne').val()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDownOne">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="dropDownTwo">
<option value="1">1</option>
<option value="2">2</option>
</select>

Javascript：使用下拉列表传递值

3 个答案: