This should be really simple... basically its a class which generates a search / filter form for a list. If I just use it once this works fine, but when I try to do two implementations the second form uses the information from the first form.
See in the "this.view_recalc" function in the "GET SELECT OPTION" part:
<!doctype html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<style>
td{vertical-align:top;}
.myform{border:1px solid black;}
.mylist{border:1px solid red;}
.mylist .nub_items_title,.mylist .nub_items{}
.mylist .nub_items_title:after,.mylist .nub_items:after{content:'';display:block;clear:both;}
.mylist span[itemprop="title"]{width:100px;float:left;font-weight:bold;}
.mylist span[itemprop="name"]{width:100px;float:left;}
.mylist span[itemprop="type"]{width:100px;float:left;}
.mylist span[itemprop="logo"]{width:100px;float:left;}
}
</style>
<script>
var listfilter = function (id_form,id_list,v) {
var self = this;
this.idname = id_form;
this.idlist = id_list;
//this.vals = v;
var vals = v;
this.init = function(){
console.log('Initialising list: '+this.idname);
this.add_form();
}
this.add_form = function(){
//console.log('Initialising list: '+this.idname);
// CREATE FORM
var data = "<form class='nub_list_form'>";
for(i=0;i<vals.length;i++){
data += "<select class='target_nublist' name='"+vals[i][0]+"' />";
}
data += "</form>";
// ADD FORM
$("#"+this.idname+"").each(function(i){
$(this).html("hello: "+data);
});
// GET FORM HANDLE
var obj_form = $("#"+this.idname+" form")[0];
// LOOP ITEMS
for(i=0;i<vals.length;i++){
// GET & FILL SELECT
var o = $(obj_form).children("select[name='"+vals[i][0]+"']");//[0]; // [0];
for (j = 0; j < v[i][2].length; j++){
$(o).append($('<option/>', { value: vals[i][2][j][0], text : vals[i][2][j][1] }));
}
// SET DEFAULT / SELECTED
$(obj_form).children("select[name='"+vals[i][0]+"']").val(vals[i][1]);
}
// ADD CHANGE HANDLERS
$(obj_form).children("select").change(function(){
// REDRAW
self.view_recalc();
});
}
this.view_recalc = function(){
var vt = vals;
//alert("#"+self.idlist+" .nub_items");
// LOOP ITEMS
$("#"+self.idlist+" .nub_items").each(function(i){
var o=this;
var flag = 0;
for(i=0;i<vt.length;i++){
// GET SELECT OPTION
//var v = $("#"+this.idlist+" select[name='"+this.vals[i][0]+"']").val();
//var v = $("#"+self.idlist+" select[name='"+vt[i][0]+"']").val();
//var v = $("#"+self.idlist+" select[name='"+vt[i][0]+"']").val();
//var v = $(o+" select[name='"+vt[i][0]+"']").val();
var v = $("select[name='"+vt[i][0]+"']").val();
/*var v = "Any";
$(this).find("select[name='"+vt[i][0]+"']").each(function(ii){
v=$(o).val();
});*/
/*var v = "Any";
$(this).children("select[name='"+vt[i][0]+"']").each(function(ii){
v=$(this).val();
});*/
if(v!="Any"){
// SEARCH
$(this).find('span').each(function(ii){
if($(this).attr('itemprop')==vt[i][0]){
if($(this).text()==v){
flag+=1;
//return false; // break;
}
}
});
}else{
// PASS
flag+=1;
}
}
// DECIDE
if(flag==vt.length){
$(this).css("display","block");
}else{
$(this).css("display","none");
}
});
}
};
$(function() {
var listfilter1 = new listfilter('myform1','mylist1',
[
["type","Female",[["Any","All"],["Male","Men"],["Female","Woman"]]],
["name","Bob",[["Any","All"],["Alice","Alice"],["Bob","Bob"]]],
["logo","Logo B",[["Any","All"],["Logo A","Logo aa"],["Logo B","Logo bb"],["Logo C","Logo cc"]]]
]);
var listfilter2 = new listfilter('myform2','mylist2',
[
["type","Female",[["Any","All"],["Male","Men"],["Female","Woman"]]],
["name","Bob",[["Any","All"],["Alice","Alice"],["Bob","Bob"]]],
["logo","Any",[["Any","All"],["Logo A","Logo aa"],["Logo B","Logo bb"],["Logo C","Logo cc"]]]
]);
listfilter1.init();
listfilter2.init();
});
</script>
</head>
<body>
<table><tr><td style='width:240px;'>
<div id='myform1' class='myform'>
</div>
<div id='myform2' class='myform'>
</div>
</td>
<td style=''>
<div id='mylist1' class='mylist'>
<div class='nub_items_title'>
<span itemprop='title'>Title</span>
<span itemprop='name'>Name</span>
<span itemprop='type'>Type</span>
<span itemprop='logo'>Logo</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Miss</span>
<span itemprop='name'>Alice</span>
<span itemprop='type'>Female</span>
<span itemprop='logo'>Logo A</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Mr</span>
<span itemprop='name'>Bob</span>
<span itemprop='type'>Male</span>
<span itemprop='logo'>Logo B</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Mz</span>
<span itemprop='name'>Eve</span>
<span itemprop='type'>Female</span>
<span itemprop='logo'>Logo C</span>
</div>
</div>
<div id='mylist2' class='mylist'>
<div class='nub_items_title'>
<span itemprop='title'>Title</span>
<span itemprop='name'>Name</span>
<span itemprop='type'>Type</span>
<span itemprop='logo'>Logo</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Miss</span>
<span itemprop='name'>Alice</span>
<span itemprop='type'>Female</span>
<span itemprop='logo'>Logo A</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Mr</span>
<span itemprop='name'>Bob</span>
<span itemprop='type'>Male</span>
<span itemprop='logo'>Logo B</span>
</div>
<div class='nub_items'>
<span itemprop='title'>Mz</span>
<span itemprop='name'>Eve</span>
<span itemprop='type'>Female</span>
<span itemprop='logo'>Logo C</span>
</div>
</div>
</td>
</tr>
</table>
<div style='clear:both;'></div>
<br /><br />
<a href='index.html'>INDEX</a>
<br /><br />
</div>
</body>
</html>
Thanks
