mentalist Posted June 17, 2016 Share Posted June 17, 2016 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 Quote Link to comment https://forums.phpfreaks.com/topic/301356-select-a-select-within-a-jquery-each-this/ Share on other sites More sharing options...
requinix Posted June 18, 2016 Share Posted June 18, 2016 So what you're saying is that var v = $("select[name='"+vt[i][0]+"']").val();is getting you the wrong value? Remember that vt[0] will be like "type" or "name" which means you're doing $("select[name='type']").val() Quote Link to comment https://forums.phpfreaks.com/topic/301356-select-a-select-within-a-jquery-each-this/#findComment-1533783 Share on other sites More sharing options...
mentalist Posted June 19, 2016 Author Share Posted June 19, 2016 But because there are two forms on the page, I feel have to use the # id identifier too? My problem seems to be that both forms use the first forms' current values, whereas the second form should use its own values. Quote Link to comment https://forums.phpfreaks.com/topic/301356-select-a-select-within-a-jquery-each-this/#findComment-1533817 Share on other sites More sharing options...
kicken Posted June 19, 2016 Share Posted June 19, 2016 After you create your form, save a reference to it onto this/self, then use jquery's find method to search for elements within that form. // GET FORM HANDLE var obj_form = $("#"+this.idname+" form")[0]; self.form = obj_form; var v = self.form.find("select[name='"+vt[i][0]+"']").val(); Quote Link to comment https://forums.phpfreaks.com/topic/301356-select-a-select-within-a-jquery-each-this/#findComment-1533818 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.