jquery - 根据 radio 数据过滤掉选择的选项

Question

有a related question反响很好，但方法和我的实际实现需要不同的策略。

请查看我作为作业完成的演示示例: http://jsfiddle.net/k8fNb/

我有两个家庭作业:

1. 根据数据过滤器隐藏和显示选择选项:TODO
2. 根据单选值选择选择选项:完成

当您单击单选按钮时，选择值应与单选按钮值 (#2) 相同，然后完成，但这还应根据单选按钮的数据过滤器来过滤选择选项的可见性。 #filters 上的数据过滤器 ["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);  
  });
});

演示: 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);  
  });
});

演示: http://jsfiddle.net/dirtyd77/k8fNb/2/