Question

有人可以告诉我如何将值从表单传递到2d关联数组吗？我制作了简单的关联数组并且很容易编写它，但现在我遇到了2d数组和getSalary()函数的问题。 getWorkload()工作正常，但getSalary()不起作用。我会很感激一些提示或代码修改。

var salaries = [
  [
    "mrWh", ["intern", 2511],
    ["contractual", 2592],
    ["designated", 2932],
    ["certificated", 3411]
  ],
  [
    "mrbchWht", ["intern", 2121],
    ["contractual", 2200],
    ["designated", 2522],
    ["certificated", 3000]
  ],
  [
    "bchWht", ["intern", 1868],
    ["contractual", 1910],
    ["designated", 2200],
    ["certificated", 2600]
  ]
];

var worklooad = [];

worklooad["20"] = 20;
worklooad["25"] = 25;
worklooad["30"] = 30;
worklooad["35"] = 35;

function getSalary() {

  var slr = 0;

  var formData = document.forms["data"];

  var selEdLvl = formData.elements["edLvl"];

  var selDegree = formData.elements["degrees"];

  slr = salaries[selEdLvl][selDegree.value];

  return slr;
}

function getWorkload() {

  var psm = 0;

  var formularz = document.forms["data"];

  var selPsm = formularz.elements["workload"];

  psm = worklooad[selPsm.value];

  return psm;
}

function chkEtat(pStr) {

  var spl44 = document.getElementById("spl44");

  if (!isNaN(pStr) && pStr !== "" && pStr <= getWorkload()) {

    spl44.style.fontSize = "22px";

    pStr = pStr / getWorkload();

    spl44.innerHTML = pStr.toFixed(2) + "<br>";

    return pStr;
  } else if (isNaN(pStr)) {

    spl44.style.fontSize = "18px";

    spl44.innerHTML = "Enter number." + "<br>";

    return 0;
  } else if (pStr > getWorkload()) {

    var spl44 = document.getElementById("spl44");

    spl44.innerHTML = "inappropriate value." + "<br>";

    return 0;
  } else {
    document.getElementById("spl44").innerHTML = "";
  }

}

function calcpTime() {

  var str = document.getElementById("inppn");

  var vStr = document.getElementById("inppn").value;

  var rpvStr = vStr.replace(/,/g, '.');

  rpvStr = parseFloat(rpvStr);

  var cmp = /^\d{1,2}$/.test(vStr);

  if (cmp === true) {

    var nStr = vStr.concat(".0");

    document.getElementById("inppn").value = nStr;

    var fnStr = parseFloat(nStr);

    return chkEtat(fnStr);
  }
  return chkEtat(rpvStr);
}

function calcSalaries() {
  calcpTime();
  document.getElementById("spl55").innerHTML = getSalary() * calcpTime();
}

function clearInps() {
  document.getElementById("data").reset();
}

<form id="data">
  <div>
    <label>Education level: </label>
    <select id="edLvl">
      <option value="" selected disabled hidden>Select</option>
      <option value="mrWh">Master with pedagogical preparation</option>
      <option value="mrbchWht">Master without pedagogical preparation</option>
      <option value="mrbchWht">Bachelor with pedagogical preparation</option>
      <option value="bchWht">Bachelor without pedagogical preparation</option>
    </select>
  </div>

  <div>
    <label>Ascension degree: </label>
    <select id="degrees">
      <option value="" selected disabled hidden>Select</option>
      <option value="intern">intern</option>
      <option value="contractual">contractual</option>
      <option value="designated">designated</option>
      <option value="certificated">certificated</option>
    </select>
  </div>

  <div>
    <label>Workload: </label>
    <select id="workload">
      <option value="" selected disabled hidden>Select</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
    </select>
  </div>

  <div>
    <label>Workload: </label>
    <input onchange="calcSalaries()" type=text id="inppn">
    <span id="spl44"></span>
  </div>

  <div>
    <label>Salary:  </label>
    <span id="spl55"></span>
  </div>
  <button id="clear" onclick="clearInps()">Clear data</button>
</form>

Answer 1

使用var salaries = [ [ "mrWh", ["intern", 2511], ["contractual", 2592], ["designated", 2932], ["certificated", 3411] ], [ "mrbchWht", ["intern", 2121], ["contractual", 2200], ["designated", 2522], ["certificated", 3000] ], [ "bchWht", ["intern", 1868], ["contractual", 1910], ["designated", 2200], ["certificated", 2600] ] ]; document.querySelector('#data').addEventListener('submit', e => e.preventDefault()); function getSalary() { const edLvlVal = document.querySelector('#edLvl').value; const degreeVal = document.querySelector('#degrees').value; const salary = salaries .find(([level]) => level === edLvlVal) .find(([degree]) => degree === degreeVal); console.log('salary ' + salary); }标识数组中的特定元素：

<form id="data">

  <div>
    <label>Education level: </label>
    <select id="edLvl">
      <option value="" selected disabled hidden>Select</option>
      <option value="mrWh">Master with pedagogical preparation</option>
      <option value="mrbchWht">Master without pedagogical preparation</option>
      <option value="mrbchWht">Bachelor with pedagogical preparation</option>
      <option value="bchWht">Bachelor without pedagogical preparation</option>
    </select>
  </div>

  <div>
    <label>Ascension degree: </label>
    <select id="degrees">
      <option value="" selected disabled hidden>Select</option>
      <option value="intern">intern</option>
      <option value="contractual">contractual</option>
      <option value="designated">designated</option>
      <option value="certificated">certificated</option>
    </select>
  </div>

  <div>
    <label>Workload: </label>
    <select id="workload">
      <option value="" selected disabled hidden>Select</option>
      <option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option>
      <option value="35">35</option>
    </select>
  </div>

  <div>
    <label>Workload: </label>
    <input onchange="calcSalaries()" type=text id="inppn">
    <span id="spl44"></span>
  </div>

  <div>
    <label>Salary:  </label>
    <span id="spl55"></span>
  </div>

  <button onclick="getSalary()">Get Salary</button>

  <button id="clear" onclick="clearInps()">Clear data</button>

</form>

.find

但您的数据结构非常难以处理 - 您应该使用对象，因此您可以通过字符串键访问，这比const salaries = { mrWh: {intern: 2511, contractual: 2592, designated: 2932, certificated: 3411 }, mrbchWht: { intern: 2121, contractual: 2200, designated: 2522, certificated: 3000 }, bchWht: { intern: 1868, contractual: 1910, designated: 2200, certificated: 2600 } }; const prop1 = 'mrWh'; const prop2 = 'designated'; console.log(salaries[prop1][prop2]);简单得多。请改用这样的东西：

definitely lost: 1,048,576 bytes in 1 blocks

Answer 2

我认为您的主要问题是您在几个地方错过.value。例如：var selEdLvl = formData.elements["edLvl"];可能应更改为var selEdLvl = formData.elements["edLvl"].value;

Answer 3

如果您将工资数组变成“关联”数组：

var salaries_assoc = salaries
.reduce(function(ac,d,i){
    ac[d[0]]=d.slice(1)
    .reduce(function(ac,d,i){
        ac[d[0]]=d[1];return ac
    },{});
    return ac
},{});
/*"{
    "mrWh": {
        "intern": 2511,
        "contractual": 2592,
        "designated": 2932,
        "certificated": 3411
    },
    "mrbchWht": {
        "intern": 2121,
        "contractual": 2200,
        "designated": 2522,
        "certificated": 3000
    },
    "bchWht": {
        "intern": 1868,
        "contractual": 1910,
        "designated": 2200,
        "certificated": 2600
    }
}"*/

现在您可以在事件中（或在您的getSalaries函数等中）执行此操作：

var value1 = document.getElementById("edLvl").value,//"mrWh"
    value2 = document.getElementById("degrees").value;//"intern"
salaries_assoc[value1] && salaries_assoc[value1][value2];//2511

从表单检索数据到关联数组

3 个答案: