Question

当从多个下拉列表选择中选择不同选项（包括一个下拉菜单中的多个选择）时，如何实现显示值的功能例如，HTML将是

<!DOCTYPE html>
<html>
<body>
<div>
 <select name="entities">
  <option value="0">--Select one item--</option>
  <option value="1">entity1</option>
  <option value="2">entity2</option>
  <option value="3">entity3</option>
 </select>
</div>

<div>
 <select name="categories" multiple>
  <option value="0">--Select one item--</option>
  <option value="1">category1</option>
  <option value="2">category2</option>
  <option value="3">category3</option>
 </select>
 </div>

<p> Display values </p>
<div id="displayValues"></div>
</body>
</html>

例如，需要满足下表的显示规则

|--------------------------|------------------|----------------------|
|      Display Value       |     Entities     | Categories           |
|--------------------------|------------------|----------------------|
| "value1"                 |        entity1   | category1            |
|--------------------------|------------------|----------------------|
|  "value2"                |        entity2   | category1            |
|--------------------------|------------------|----------------------|
|  "value3"                |        entity1   | category2            |
|--------------------------|------------------|----------------------|
|  "value4"                |        entity1   | category1 & category2|
|--------------------------|------------------|----------------------|
|    ...                   |         ...      |      ...             |

如何创建通用的javascript函数来控制不同条件下的显示值？而不是在函数内部使用if编写所有条件？（ps.may编写了一个通用函数和一个单独的字典来包含所有规则？）

Answer 1

我认为您应该建立一个字典并使用它，例如：

var dict = {
  "Value1": { entities: [1, 3], categories: [1] },
  "Value2": { entities: [1], categories: [2] },
  "Value3": { entities: [1, 2], categories: [1, 3] },
  "Value4": { entities: [1, 2, 3], categories: [1, 3] },
  "Value5": { entities: [2, 3], categories: [1, 2] }
};
var entitiesList = document.querySelector('[name=entities]'),
  categoriesList = document.querySelector('[name=categories]'),
  displayValues = document.querySelector('#displayValues');

function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i = 0, iLen = options.length; i < iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

function arrayContainsElementFrom(arr1, arr2) {
  for (var i in arr2) {
    if (-1 !== arr1.indexOf(arr2[i])) {
      return true;
    }
  }
  return false;
}

document.querySelectorAll('[name=entities],[name=categories]').forEach(function(el) {
  el.addEventListener('change', function() {
    while (displayValues.firstChild) {
      displayValues.removeChild(displayValues.firstChild); // Remove the previous children
    }
    
    var entity = parseInt(entitiesList.options[entitiesList.selectedIndex].value),
      categories = getSelectValues(categoriesList)
        .map(function(v) { return parseInt(v); });
    
    for (var value in dict) {
      if (-1 !== dict[value].entities.indexOf(entity) &&
          arrayContainsElementFrom(dict[value].categories, categories)) {
        var el = document.createElement('div');
        el.textContent = value; // For old browsers use innerText
        displayValues.appendChild(el);
      }
    }
  }, false);
});

<div>
  <select name="entities">
    <option value="0">--Select one item--</option>
    <option value="1">entity1</option>
    <option value="2">entity2</option>
    <option value="3">entity3</option>
  </select>
</div>

<div>
  <select name="categories" multiple>
    <option value="0">--Select one item--</option>
    <option value="1">category1</option>
    <option value="2">category2</option>
    <option value="3">category3</option>
  </select>
</div>

<p>Display values</p>
<div id="displayValues"></div>

如何从多重选择框控制多重选择以显示值

1 个答案: