javascript - 如何从多选框中控制多选以显示值
问题描述
例如,当从多个下拉列表选择中选择不同的选项(包括从一个下拉列表中选择多项)时,如何实现显示值的功能,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 else 编写所有条件?(ps.可能会写一个通用函数和一个单独的字典来包含所有规则??)
解决方案
我认为你应该建立一个字典并使用它,例如:
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>
推荐阅读
- android - 在路径中使用带有冒号的 PUT-Request 改造 URL 问题
- mongodb - GridFS 上传文件时抛出 Command listIndexes failed 异常
- php - PHP - 使用子类中声明的类的受保护/抽象方法
- java - Android Java服务方法总是向Qt Android服务返回相同的值
- preview - 我在哪里可以找到预览应用程序的源代码;我想开发其他工具以包含在预览中
- android - Is there a way to click on a specific spot on an element?
- vue.js - 从 Vuex getter 中的观察者那里获取值
- unity3d - Unity - 目标线(线渲染器)未在 2D 射击游戏中显示
- node.js - 未捕获的 AssertionError:预期 404 等于 405
- mysql - 根据其他数据库mysql从表中删除