javascript - 根据下拉菜单中选择的多个选项搜索数组

Question

我正在尝试构建一个查找器，它使用下拉菜单中的选定选项，并从这些特定选择中搜索一个数组（与这些选择相关）并在 html 上显示一个值。我尝试使用 for 循环，但是当我尝试遍历数组时遇到问题。这是很多数据，我不确定是否应该使用 Ajax 和 JSON？任何建议都会非常有帮助。

下拉 1 显示螺纹/焊料或法兰/凹槽 下拉 2 显示 DN 尺寸 下拉 3 显示编号 的转弯。

基本上，对于每个 DN 尺寸和匝数，螺纹/焊料在其数组中具有不同的值。

我也想丢失提交按钮，但它一直在帮助我尝试调试。我已经将代码减少了一大堆，仍然有很多数据要输入到数组中。

$(document).ready(function() {
  var list1 = document.getElementById('firstList');
  list1.options[0] = new Option('Valve Type', '');
  list1.options[1] = new Option('Thread/Solder', 'Thread/Solder');
  list1.options[2] = new Option('Flange/Groove', 'Flange/Groove');
});

function getValveSize() {
  var list1 = document.getElementById('firstList');
  var list2 = document.getElementById("secondList");
  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue == 'Thread/Solder') {
    list2.options.length = 0;
    list2.options[0] = new Option('DN', '');
    list2.options[1] = new Option('10', '10');
    list2.options[2] = new Option('15', '15');
    list2.options[3] = new Option('20', '20');
    list2.options[4] = new Option('25', '25');
    list2.options[5] = new Option('32', '32');
    list2.options[6] = new Option('40', '40');
    list2.options[7] = new Option('50', '50');
    list2.options[8] = new Option('65', '65');
  } else if (list1SelectedValue == 'Flange/Groove') {
    list2.options.length = 0;
    list2.options[0] = new Option('DN', '');
    list2.options[1] = new Option('20', '20');
    list2.options[2] = new Option('25', '25');
    list2.options[3] = new Option('32', '32');
    list2.options[4] = new Option('40', '40');
    list2.options[5] = new Option('50', '50');
    list2.options[6] = new Option('65', '65');
    list2.options[7] = new Option('80', '80');
    list2.options[8] = new Option('100', '100');
    list2.options[9] = new Option('125', '125');
    list2.options[10] = new Option('150', '150');
    list2.options[11] = new Option('200', '200');
    list2.options[12] = new Option('250', '250');
    list2.options[13] = new Option('300', '300');
    list2.options[14] = new Option('350', '350');
    list2.options[15] = new Option('400', '400');
  }
}

function getTurns() {
  var list2 = document.getElementById('secondList');
  var list3 = document.getElementById('thirdList');
  var list2SelectedValue = list2.options[list2.selectedIndex].value;

  if ($.inArray(list2SelectedValue, ['10', '15', '20', '25']) >= 0) {
    list3.options.length = 0;
    list3.options[0] = new Option('Turns', '');
    list3.options[1] = new Option('0.25', '0.25');
    list3.options[2] = new Option('0.5', '0.5');
    list3.options[3] = new Option('0.75', '0.75');
    list3.options[4] = new Option('1', '1');
    list3.options[5] = new Option('1.1', '1.1');
    list3.options[6] = new Option('1.2', '1.2');
    list3.options[7] = new Option('1.3', '1.3');
    list3.options[8] = new Option('1.4', '1.5');
    list3.options[9] = new Option('1.6', '1.6');
    list3.options[10] = new Option('1.7', '1.7');
    list3.options[11] = new Option('1.8', '1.8');
    list3.options[12] = new Option('1.9', '1.9');
    list3.options[13] = new Option('2', '2');
    list3.options[14] = new Option('2.1', '2.1');
    list3.options[15] = new Option('2.2', '2.2');
    list3.options[16] = new Option('2.3', '2.3');
    list3.options[17] = new Option('2.4', '2.4');
    list3.options[18] = new Option('2.5', '2.5');
    list3.options[19] = new Option('2.6', '2.6');
    list3.options[20] = new Option('2.7', '2.7');
    list3.options[21] = new Option('2.8', '2.8');
    list3.options[22] = new Option('2.9', '2.9');
    list3.options[23] = new Option('3', '3');
  }

  if ($.inArray(list2SelectedValue, ['32', '40', '50']) >= 0) {
    list3.options.length = 0;
    list3.options[0] = new Option('Turns', '');
    list3.options[1] = new Option('0.25', '0.25');
    list3.options[2] = new Option('0.5', '0.5');
    list3.options[3] = new Option('0.75', '0.75');
    list3.options[4] = new Option('1', '1');
    list3.options[5] = new Option('1.1', '1.1');
    list3.options[6] = new Option('1.2', '1.2');
    list3.options[7] = new Option('1.3', '1.3');
    list3.options[8] = new Option('1.4', '1.5');
    list3.options[9] = new Option('1.6', '1.6');
    list3.options[10] = new Option('1.7', '1.7');
    list3.options[11] = new Option('1.8', '1.8');
    list3.options[12] = new Option('1.9', '1.9');
    list3.options[13] = new Option('2', '2');

    var threadedDn10Kv = [{
      '0.25': 0.21,
      '0.5': 0.34,
      '0.75': 0.40,
      '1': 0.46,
      '1.1': 0.48,
    }];

    var threadedDn15Kv = [{
      '0.25': 0.30,
      '0.5': 0.34,
      '0.75': 0.40,
      '1': 0.46,
      '1.1': 0.48,
      '1.2': 0.50,
    }]

    function findInArray(threadedDn10Kv, val) {
      var list2 = document.getElementById('secondList');
      var val = list2.options[list2.selectedIndex].value;
      for (var i = 0; i < threadedDn10Kv.length; i++) {
        if (threadedDn10Kv[i] === val) {
          document.getElementById('kvanswer').innerHTML = `Kv = ${i}`;

        }
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1 class="calculatorcom">Valve calculations and conversions</h1><br><br>
  <h2>Oventropp valve Kv finder</h2><br>
  <h2 id="kvanswer"></h2>
</div>
<div class="valvetype">
  <select class="form-control" id='firstList' name='firstList' onClick="getValveSize()">
    <option>Type</option>
  </select>
  <select class="form-control" id='secondList' name='secondList' onClick="getTurns()">
    <option>DN</option>
  </select>
  <select class="form-control" id='thirdList' name='thirdList'>
    <option>Turns</option>
  </select>
  <button onclick="findInArray()">Submit</button>

标签： javascriptjquery

Answer 1

像这样的东西？

$(document).ready(function () {
  var list1 = document.getElementById('firstList');
  list1.options[0] = new Option('Valve Type', '');
  list1.options[1] = new Option('Thread/Solder', 'Thread/Solder');
  list1.options[2] = new Option('Flange/Groove', 'Flange/Groove');
});

function getValveSize() {
  var list1 = document.getElementById('firstList');
  var list2 = document.getElementById("secondList");
  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue == 'Thread/Solder') {
    list2.options.length = 0;
    list2.options[0] = new Option('DN', '');
    list2.options[1] = new Option('10', '10');
    list2.options[2] = new Option('15', '15');
    list2.options[3] = new Option('20', '20');
    list2.options[4] = new Option('25', '25');
    list2.options[5] = new Option('32', '32');
    list2.options[6] = new Option('40', '40');
    list2.options[7] = new Option('50', '50');
    list2.options[8] = new Option('65', '65');
  } else if (list1SelectedValue == 'Flange/Groove') {
    list2.options.length = 0;
    list2.options[0] = new Option('DN', '');
    list2.options[1] = new Option('20', '20');
    list2.options[2] = new Option('25', '25');
    list2.options[3] = new Option('32', '32');
    list2.options[4] = new Option('40', '40');
    list2.options[5] = new Option('50', '50');
    list2.options[6] = new Option('65', '65');
    list2.options[7] = new Option('80', '80');
    list2.options[8] = new Option('100', '100');
    list2.options[9] = new Option('125', '125');
    list2.options[10] = new Option('150', '150');
    list2.options[11] = new Option('200', '200');
    list2.options[12] = new Option('250', '250');
    list2.options[13] = new Option('300', '300');
    list2.options[14] = new Option('350', '350');
    list2.options[15] = new Option('400', '400');
  }
}

function getTurns() {
  // clear list
  $('#thirdList').empty();

  var list1 = document.getElementById('firstList');
  var list2 = document.getElementById('secondList');
  var list3 = document.getElementById('thirdList');
  var list2SelectedValue = list2.options[list2.selectedIndex].value;
  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue === 'Thread/Solder') {
    if ($.inArray(list2SelectedValue, ['10', '15', '20', '25']) >= 0) {
      list3.options.length = 0;
      list3.options[0] = new Option('Turns', '');
      list3.options[1] = new Option('0.25', '0.25');
      list3.options[2] = new Option('0.5', '0.5');
      list3.options[3] = new Option('0.75', '0.75');
      list3.options[4] = new Option('1', '1');
      list3.options[5] = new Option('1.1', '1.1');
      list3.options[6] = new Option('1.2', '1.2');
      list3.options[7] = new Option('1.3', '1.3');
      list3.options[8] = new Option('1.4', '1.5');
      list3.options[9] = new Option('1.6', '1.6');
      list3.options[10] = new Option('1.7', '1.7');
      list3.options[11] = new Option('1.8', '1.8');
      list3.options[12] = new Option('1.9', '1.9');
      list3.options[13] = new Option('2', '2');
      list3.options[14] = new Option('2.1', '2.1');
      list3.options[15] = new Option('2.2', '2.2');
      list3.options[16] = new Option('2.3', '2.3');
      list3.options[17] = new Option('2.4', '2.4');
      list3.options[18] = new Option('2.5', '2.5');
      list3.options[19] = new Option('2.6', '2.6');
      list3.options[20] = new Option('2.7', '2.7');
      list3.options[21] = new Option('2.8', '2.8');
      list3.options[22] = new Option('2.9', '2.9');
      list3.options[23] = new Option('3', '3');
    }

    if ($.inArray(list2SelectedValue, ['32', '40', '50']) >= 0) {
      list3.options.length = 0;
      list3.options[0] = new Option('Turns', '');
      list3.options[1] = new Option('0.25', '0.25');
      list3.options[2] = new Option('0.5', '0.5');
      list3.options[3] = new Option('0.75', '0.75');
      list3.options[4] = new Option('1', '1');
      list3.options[5] = new Option('1.1', '1.1');
      list3.options[6] = new Option('1.2', '1.2');
      list3.options[7] = new Option('1.3', '1.3');
      list3.options[8] = new Option('1.4', '1.5');
      list3.options[9] = new Option('1.6', '1.6');
      list3.options[10] = new Option('1.7', '1.7');
      list3.options[11] = new Option('1.8', '1.8');
      list3.options[12] = new Option('1.9', '1.9');
      list3.options[13] = new Option('2', '2');
    }
  } else if (list1SelectedValue === 'Flange/Groove') {
    list3.options[0] = new Option('other option set', 'other option set');
  }

  $('#thirdList').append(list3);
}


var threaded = {
  '10': {
    '0.25': 0.21,
    '0.5': 0.34,
    '0.75': 0.40,
    '1': 0.46,
    '1.1': 0.48,
  },
  '15': {
    '0.25': 0.30,
    '0.5': 0.34,
    '0.75': 0.40,
    '1': 0.46,
    '1.1': 0.48,
    '1.2': 0.50,
  }
};

function findInArray() {
  var selectedThread = document.getElementById('secondList').value;
  var selectedTurn = document.getElementById('thirdList').value;
  document.getElementById('kvanswer').innerHTML = `Kv = ${threaded[selectedThread][selectedTurn]}`;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1 class="calculatorcom">Valve calculations and conversions</h1><br><br>
  <h2>Oventropp valve Kv finder</h2><br>
  <h2 id="kvanswer"></h2>
</div>
<div class="valvetype">
  <select class="form-control" id='firstList' name='firstList' onClick="getValveSize()">
    <option>Type</option>
  </select>
  <select class="form-control" id='secondList' name='secondList' onClick="getTurns()">
    <option>DN</option>
  </select>
  <select class="form-control" id='thirdList' name='thirdList'>
    <option>Turns</option>
  </select>
  <button onclick="findInArray()">Submit</button>