라디오 데이터를 기반으로 선택 옵션을 필터링하십시오.

Question

응답이 많은 a related question이 있지만 접근 방식과 실제 구현에는 다른 전략이 필요합니다.

1. 하는 데이터 필터를 기반으로 숨겨진 가시 옵션을 선택하십시오 : 나는이 개 집에 작품을 http://jsfiddle.net/k8fNb/

   :

   내 숙제로했던 데모 샘플을 참조하시기 바랍니다 TODO

2. 선택 옵션이 라디오 값에 따라 선택하십시오 :

일을하는 것은 당신이 라디오를 클릭하면 값을 선택해야 라디오 값 (# 2)과 같아야합니다.하지만 라디오의 데이터 필터를 기반으로 선택 옵션의 가시성을 필터링해야합니다. 에있는 데이터 필터 ["a","b","c"]은 값이 a, b, c 인 옵션을 표시하고 나머지는 숨겨야합니다. 내 문제는 # 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 to use radio value 
     return $(this).val() == v; 
     }).prop("selected", true); 
    }); 
    }); 
}); 

.

Answer 1

"["a","b","c"]"을 data-filter에 넣으면 배열이 아닌 문자열로 간주됩니다.

이렇게 접근하는 것은 어떻습니까?

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 i = 0; i < 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/

---

그러나, 당신은 또한 .split()을 사용하고 브래킷을 제거 새 배열을 만들 수 있습니다.

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/