Select a select within a JQuery each this

mentalist · 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

requinix · 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()

mentalist · 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.

kicken · 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();

Sign In

Select a select within a JQuery each this

Recommended Posts

mentalist

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

mentalist

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information