3

素晴らしい反応を示す関連する質問がありますが、アプローチと私の実際の実装には異なる戦略が必要です。

宿題として行ったデモ サンプルをご覧ください: http://jsfiddle.net/k8fNb/

2 つの宿題があります。

  1. データフィルターに基づいて選択オプションを非表示および表示にします: TODO
  2. ラジオの値に基づいて選択オプションを選択します: DONE

ラジオをクリックすると、選択値はラジオ値 (#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);
    });
  });
});

どんな助けでも大歓迎です。

4

1 に答える 1