jquery - Filter out select options based on radios data -

there a related question great response, approach , actual implementation requires different strategy.

please view demo sample have done homework: http://jsfiddle.net/k8fnb/

i have 2 home works:

1. make select options hidden , visible based on data-filter: todo
2. make select option selected based on radio value: done

when click radio, select value should same radio value (#2), , done, should filter visibility of select options based on radios' data-filter. data filter ["a","b","c"] on #filters should make options values a, b, c visible, , hide rest. issue how #1.

html:

<div id="filters">   <input type="radio" name="filter" value="a" data-filter="["a","b","c"]"/><label>a </label>   <input type="radio" name="filter" value="b" data-filter="["a","b","c"]"/><label>b </label>   <input type="radio" name="filter" value="c" data-filter="["a","b","c"]"/><label>c </label>   <input type="radio" name="filter" value="1" data-filter="["1","2","3"]"/><label>1 </label>   <input type="radio" name="filter" value="2" data-filter="["1","2","3"]"/><label>2 </label>   <input type="radio" name="filter" value="3" data-filter="["1","2","3"]"/><label>3 </label> </div>  <select id="options">   <option value="a">a</option>   <option value="b">b</option>   <option value="c">c</option>   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option>   </select> 

jquery:

$(document).ready(function(){    $('#filters input').each(function () {     var v = $(this).val();     $(this).click(function () {       $('#options option').filter(function(){         // 1. make select options hidden or visible based on data-filter.         // ? todo ....          // 2. fixed. change select value use radio value         return $(this).val() == v;       }).prop("selected", true);     });   }); }); 

any appreciated.

if put "["a","b","c"]" data-filter, considered string rather array.

how approaching this?

html:

<div id="filters">   <input type="radio" name="filter" value="a"/><label>a</label>   <input type="radio" name="filter" value="b"/><label>b</label>   <input type="radio" name="filter" value="c"/><label>c</label>   <input type="radio" name="filter" value="1"/><label>1</label>   <input type="radio" name="filter" value="2"/><label>2</label>   <input type="radio" name="filter" value="3"/><label>3</label> </div>  <select id="options">   <option value="a">a</option>   <option value="b">b</option>   <option value="c">c</option>   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option>   </select> 

javascript:

$(function () {     var arrays = [         ['a', 'b', 'c'],         ['1', '2', '3']     ];    $('#filters input').change(function () {       var value = $(this).val();       var activearr = [];       var index;       for(var = 0; < arrays.length; i++){           index = $.inarray(value, arrays[i]);           if(index > -1){               activearr = arrays[i];               break;           }       }        $('#options').empty(); //clear options       $.each(activearr, function(i, e){          $('#options').append('<option value="' + e + '">' + e + '</option>');       });        $('#options option').eq(index).prop('selected', true);     }); }); 

demo: http://jsfiddle.net/dirtyd77/jry9r/3/

---

however, create new array using .split() , removing brackets.

html:

<div id="filters">   <input type="radio" name="filter" value="a" data-filter="a,b,c"/><label>a</label>   <input type="radio" name="filter" value="b" data-filter="a,b,c"/><label>b</label>   <input type="radio" name="filter" value="c" data-filter="a,b,c"/><label>c</label>   <input type="radio" name="filter" value="1" data-filter="1,2,3"/><label>1</label>   <input type="radio" name="filter" value="2" data-filter="1,2,3"/><label>2</label>   <input type="radio" name="filter" value="3" data-filter="1,2,3"/><label>3</label> </div>  <select id="options">   <option value="a">a</option>   <option value="b">b</option>   <option value="c">c</option>   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option>   </select> 

javascript:

$(function () {   $('#filters input').change(function () {       var value = $(this).val();       var activearr = $(this).data('filter').split(',');       var index;       index = $.inarray(value, activearr);       $('#options').empty(); //clear options        $.each(activearr, function(i, e){          $('#options').append('<option value="' + e + '">' + e + '</option>');       });       $('#options option').eq(index).prop('selected', true);     }); }); 

demo: http://jsfiddle.net/dirtyd77/k8fnb/2/