[英]jsrender populate selectbox multiple with already selected options
I want to populate select box through Jsrender. 我想通过Jsrender填充选择框。
The code populate the select box correctly, But i am not able to select few value by default. 该代码正确地填充了选择框,但是默认情况下我无法选择一些值。 I created a Jsrender helper function for this, but i think the other values are not accessible inside the loop, so that's why the function is not working.
我为此创建了一个Jsrender辅助函数,但是我认为循环内无法访问其他值,因此这就是该函数无法正常工作的原因。
Here is the link to jsfiddle 这是jsfiddle的链接
My html is 我的HTML是
<div class="select_placeholder"></div>
<script id="selectbox" type="text/x-jsrender">
<select multiple="multiple" name="">
{{for cats }}
{{include tmpl="#selectbox_options"/}}
{{/for}}
</select>
</script>
<script id="selectbox_options" type="text/x-jsrender" >
<option value="{{:term_id}}" {{>~selected(term_id, selected)}} >{{:name}}</option>
</script>
and my javascript is 而我的JavaScript是
$.views.helpers({
selected: function(needle,haystack) {
console.log(haystack);
if(typeof haystack === "undefined" || haystack === null) {
return;
}
var count=haystack.length;
for(var i=0;i<count;i++){
if(haystack[i]===needle){return 'selected="selected"'; }
}
return;
}
});
var cates = [
{'term_id' : 1, 'name' : 'category 1'},
{'term_id' : 2, 'name' : 'category 2'},
{'term_id' : 3, 'name' : 'category 3'},
{'term_id' : 4, 'name' : 'category 4'},
{'term_id' : 5, 'name' : 'category 5'},
];
var selected = [{'term_id' : 3}, {'term_id' : 4}];
$( ".select_placeholder" ).html(
$( "#selectbox" ).render({cats : cates,selected:selected})
);
Try to combine data for view https://jsfiddle.net/fksj52c6/5/ 尝试合并数据以查看https://jsfiddle.net/fksj52c6/5/
var cates = [
{'term_id' : 1, 'name' : 'category 1'},
{'term_id' : 2, 'name' : 'category 2'},
{'term_id' : 3, 'name' : 'category 3'},
{'term_id' : 4, 'name' : 'category 4'},
{'term_id' : 5, 'name' : 'category 5'},
];
var selected = [{'term_id' : 3}, {'term_id' : 4}];
for(var i = 0; i< selected.length; i++) {
for(var j = 0; j < cates.length; j++)
if(selected[i].term_id === cats[j].term_id) {
cats[j].selected = true;
}
}
$( ".select_placeholder" ).html(
$( "#selectbox" ).render({cats : cates})
);
html HTML
<div class="select_placeholder"></div>
<script id="selectbox" type="text/x-jsrender">
<select multiple="multiple" name="">
{{for cats }}
<option value="{{:term_id}}" {{if selected}}selected="selected"{{/if}} >{{:name}}</option>
{{/for}}
</select>
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.