So I posted the question yesterday (Link) and got the answer I needed but for the life of me I can't get this to happen if the value is selected on the body load. it only works if the user clicks the radio then it filters the options. HELP Please!!!
the Function
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
How to call
$(function() {
$('#theOptions').filterOn('input:radio[name=abc123]', {
'abc': ['a','b','c'],
'123': ['1','2','3']
});
});
Thanks in advance
BTW Here is a DEMO of it in action