https://flets.com/assets/js/refine-search-top.js

1(function($){
2  'use strict';
3
4  $(function(){
5
6    var $root   = $('#section_purpose');
7    var $parent = $root.find('#list_select_purpose_01');
8    var $child  = $root.find('#list_select_purpose_02');
9
10    var $before = $root.find('.select_before');
11    var $after  = $root.find('.select_after');
12    var $cards  = $root.find('.card_item');
13
14    var $beforeText = $before.find('.title');
15
16    // 初期状態の option を複製して保持しておく（元の並び順を保存）
17    var $placeholderOption  = $child.find('option').first(); // 「選択してください」
18    var $allChildOptions    = $child.find('option[data-parent]').clone(true);
19
20    function showDefault(msg){
21      $cards.hide();
22      $beforeText.text(msg);
23      $before.show();
24      $after.hide();
25    }
26
27    function showChoose(){
28      $before.hide();
29      $after.show();
30    }
31
32    // data-category に含まれるか判定
33    function hasCategory($card, code){
34      var raw = $card.attr('data-category') || '';
35      raw = $.trim(raw);
36      if (!raw) return false;
37
38      var list = raw.split(/\s+/);
39      return $.inArray(code, list) !== -1;
40    }
41
42    // 親変更
43    $parent.on('change', function(){
44      var parentVal = $(this).val();
45
46      $child.val('');
47
48      if (!parentVal) {
49        $child.prop('disabled', true);
50        showDefault('あなたへのおすすめ情報が表示されます。');
51        return;
52      }
53
54      $child.prop('disabled', false);
55
56      $child.empty().append($placeholderOption);
57      $allChildOptions.each(function(){
58        var $opt = $(this);
59        if ($opt.data('parent') === parentVal) {
60          $child.append($opt.clone(true));
61        }
62      });
63
64      showDefault('あなたへのおすすめ情報が表示されます。');
65    });
66
67    // 子変更 → カード絞り込み（複数カテゴリ対応）※ここは変更なし
68    $child.on('change', function(){
69      var code = $(this).val();
70
71      if (!code) {
72        showDefault('あなたへのおすすめ情報が表示されます。');
73        return;
74      }
75
76      var visibleCount = 0;
77
78      $cards.each(function(){
79        var $card = $(this);
80        var match = hasCategory($card, code);
81        $card.toggle(match);
82        if (match) visibleCount++;
83      });
84
85      if (visibleCount === 0) {
86        showDefault('あなたへのおすすめ情報がありません。');
87      } else {
88        showChoose();
89      }
90    });
91
92    // 初期状態
93    $child.prop('disabled', true);
94    showDefault('あなたへのおすすめ情報が表示されます。');
95
96  });
97
98})(jQuery);