Question

hi guys sorry to ask this one again but i have some jquery that changes the value of the second select in a pair currently im using the following code as i tried using various versions of .hide .show to do the job but i gues because im already using a variation it causes some interference but this is the code im using

jQuery.fn.filterOn = function(selectFrom, values) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            $(this).attr("title");
        });
        $(select).data('options', options);
        console.log(selectFrom);
        $(selectFrom).change(function() {
            var options = $(select).empty().data('options');
            var haystack = values[$(this).val()];
            console.log(haystack);
            $.each(options, function(i) {
                var option = options[i];
                if($.inArray(option.value, haystack) !== -1) {
                    $(select).append(
                    $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });            
    });
};

$(function() {
    $('#city').filterOn('#country', {
        'default': [],
        'LK':['LK'],'SY':['SY'],'KE':['KE']

         });
});

then this is what the two select look like bear in mind the first has 155 values and the second has over 16000 values;

<select id="country" name="country">
 <option value="">---------</option>
 <option value="LK">Sri Lanka</option>
 <option value="SY">Syria</option>
 <option value="KE">Kenya</option>.......
</select>

<select id="city" name="city">
 <option value="">---------</option>
 <option title="LK" value="1252211">Ahangama</option>
 <option title="LK" value="1252196">Ahungalla</option>
 <option title="LK" value="8100176">Ahungalle</option>
 <option title="LK" value="1251081">Anuradhapura</option>
 <option title="LK" value="1250308">Bandarawela</option>
 <option title="LK" value="1249978">Bentota</option>
 <option title="LK" value="8100177">Beruwela</option>
 <option title="LK" value="1248991">Colombo</option>
 <option title="LK" value="1248750">Dambulla</option>
 <option title="LK" value="8202608">Dickwella</option>
 <option title="LK" value="8208032">Embilipitiya</option>
 <option title="LK" value="1224688">Wadduwa</option>
 <option title="LK" value="1223738">Weligama</option>
 <option title="SY" value="170063">Aleppo</option>
 <option title="SY" value="8100417">Bloudan</option>......
</select>

this all works but because its using push im assuming it rearranges the second select to have the title value as the value so it would say lk instead of the numbers it needs to be. ive tried a few attempts with different .hide .show but none of it seems to work also these two selects are nestled inside a span that is using jquery hide show. dont know if that would affect hide show on the child elements but i cant get it to work how it should. also ive had a look at some other discussion about cascading selects but cant find any solution to my problem.

Answer 1

First of all, I would suggest using ajax or something similar to get data based on the selected value. But, if you want to know what’s wrong with the code you’ve presented, there are several things:

    var options = [];
    $(select).find('option').each(function() {
        $(this).attr("title");
    });
    $(select).data('options', options);

Here you’ve defined an empty array, then iterated over all of the options, doing nothing with any of them ($(this).attr("title"); returns the value of the title attribute, but you don’t do anything with it). Then you set the options data element of the select to the empty array. I think what you want to do is something more like:

    var options = [];
    $(select).find('option').each(function() {
        options.push(this);
    });
    $(select).data('options', options);

That would store all 16,000 option elements in the data cache. I think a better option might be:

    var options = {};
    $(select).find('option').each(function() {
        var $o = $(this), title = $o.attr('title');
        if (options.hasOwnProperty(title) === false) {
            options[title] = [];
        }
        options[title].push({ 'text': $o.text(), 'value': $o.val() });
    });
    $(select).data('options', options);

Now, in your change function you can do this:

    $(selectFrom).change(function() {
        var $select = $(select),
            options = $select.empty().data('options')[$(this).val()];
        // options is now just an array of objects with value and text properties, so:
        $.each(options, function () {
            $('<option value="' + this.value + '">' + this.text + '</option>').appendTo($select);
        });
    });            

That way you’re not storing the entire DOM element in memory, but rather only the pertinent information. Hope that helps.