javascript - 车把多选助手
问题描述
我需要车把助手的帮助:
从数据库中选择的数据:
{ _id: 5b598e31f24e7f820d2d422d, key: 'c-1', name: 'C#' },
{ _id: 5b598e61f24e7f820d2d4234, key: 'node-js', name: 'Node.js'}
HBS 生成动态选择选项:
{{#each tags}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
HTML:
<select multiple="" class="custom-select" name="skills">
<option value="5b598e22f24e7f820d2d422b">Javascript</option>
<option value="5b598e29f24e7f820d2d422c">C++</option>
<option value="5b598e31f24e7f820d2d422d">C#</option>
<option value="5b598e61f24e7f820d2d4234">Node.js</option>
</select>
如何添加selected="selected"
到具有相同 ID 的选项?有什么优雅的解决方案吗?
对于信号选择字段,我使用代码:
{{#select post.position.id}}
{{#each categories}}
<option value="{{id}}">{{name}}</option>
{{/each}}
{{/select}}
helpers.js
_helpers.select = function(selected, options){
return options.fn(this).replace(new RegExp(' value=\"'+ selected + '\"'), '$&selected="selected"');
}
解决方案
您可以使用这样的助手来测试您的字符串是否相同:
Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
var doDisplay = false;
var items = (""+rvalue).split("|");
var arrayLength = items.length;
for (var i = 0; (i < arrayLength); i++) {
if (operator == "eq") {
if (lvalue == items[i]) {
doDisplay = true;
}
} else if (operator == "ne") {
if (lvalue != items[i]) {
doDisplay = true;
}
} else if (operator == "gt") {
if (parseFloat(lvalue) > parseFloat(items[i])) {
doDisplay = true;
}
} else if (operator == "lt") {
if (parseFloat(lvalue) < parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "le") {
if (parseFloat(lvalue) <= parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "ge") {
if (parseFloat(lvalue) >= parseFloat(items[i])) {
doDisplay = true;
}
}
}
if (doDisplay) {
return options.fn(this);
} else {
return "";
}
});
然后在您的 HTML 代码中使用帮助程序,如下所示:
<select multiple="" class="custom-select" name="skills">
<option value="5b598e22f24e7f820d2d422b" {{#test name 'eq' 'Javascript'}}selected{{/test}}>Javascript</option>
<option value="5b598e29f24e7f820d2d422c" {{#test name 'eq' 'C++'}}selected{{/test}}>C++</option>
<option value="5b598e31f24e7f820d2d422d" {{#test name 'eq' 'C#'}}selected{{/test}}>C#</option>
<option value="5b598e61f24e7f820d2d4234" {{#test name 'eq' 'Node.js'}}selected{{/test}}>Node.js</option>
</select>
推荐阅读
- python - 如何将对象转换为字典?
- javascript - js设置默认返回值
- c# - Asp.net 使用计时器每 5 分钟运行一次代码
- javascript - 将库与它链接时未定义的反应本机本机模块
- apache-spark - Spark应用程序中本地文件上传失败
- java - 我在 NetBeans 上隐藏了一个“工具栏”面板,但我不知道如何再次激活它
- windows-services - Chocolatey 自助服务是如何工作的?
- ada - 使用访问类型在受保护对象中调用过程的问题
- jquery-ui - $.datepicker._curInst 如果没有从 datepicker 中选择日期,则为 null
- talend - 为什么在 tmap 中使用 addDate 不会返回正确的结果