OOP - Access an object to change it's variable?

I came across a script that's really cool but I have limited knowledge in OOP implementation. Would need help to access the value to reset it.

It's actually a 'styled dropdown box'. After you make a selection, the text appears in the box. And after clicking Reset, the text should go back to the default.

I need to know how to access the instance to modify the value!

Please see my JSFiddle: http://jsfiddle.net/bzyf5Lp2/

Any help would be appreciated.

function DropDownFilter(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDownFilter.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
        $('.filter-dropdown').removeClass('active');
    },
    getIndex : function() {
        return this.index;
    },
}

$(function() {
    var filter1 = new DropDownFilter( $('#fdd') );

    $(document).click(function() {
        // all dropdowns            
        $('.filter-dropdown').removeClass('active');
    });
});

//RESET FUNCTION
$(".isotope-reset").click(function(){       
    $("#fdd").text("Materials");
});

As you can see, I am using a jquery text change, which seems to destroy the entire instance altogether.

Since the instance was created with

 var filter1 = new DropDownFilter( $('#fdd') );

I also tried the undermentioned but with no luck.

 filter1.val = 'Materials'; 

Any help would be appreciated!

Answers


if you add setValue as shown in the following code (I left the DropDownFilter declaration so this can be run as a whole):

function DropDownFilter(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDownFilter.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
        $('.filter-dropdown').removeClass('active');
    },
    getIndex : function() {
        return this.index;
    },
    setValue : function(newVal, newIndex) {
        this.val = newVal;
        this.index = newIndex;
        this.placeholder.text(newVal);
    },
}       

EDIT: I missed your JS fiddel before, my apologies. I have forked the fiddle and added some new code that should work. You needed to duplicate the onclick code in the new setValue method. I changed the above to match the code in the fiddle for posterity. The fiddle


Need Your Help

GoogleApiClient onConnectionSuspended , should i call mGoogleApiClient.connect() again?

android google-play-services google-api-client

I am using GoogleApiClient in a service to request fused location updates. Every thing is working correctly, but sometimes the connection is suspended and onConnectionSuspended is called.