篩選出基於無線電數據的選擇選項

Question

有很好的響應a related question，但這種方法和我的實際實施需要不同的策略。

請觀看演示示例中，我已經爲我的家庭作業完成： http://jsfiddle.net/k8fNb/

我有兩個家的作品：

1. 使基於數據過濾器隱藏和可見選擇選項：TODO
2. 根據電臺值選擇選項：完成

當您單擊收音機時，選擇值應該與無線電值（＃2）相同，並且完成，但是這也應該過濾基於無線電的數據過濾器的選擇選項的可見性。數據過濾器["a","b","c"]在#filters應使選項值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/