Jqueryで絞り込みの処理時、inputの値をつなげてappendしたい。

実現したい事

絞り込みの処理で、inputの値をつなげてappendしたい。
【パターン】
1:カテゴリーに「women」「men」「kids」のボタンがあり、値を1つだけとりだす。
2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、シーズンをクリックするとカテゴリーで選択した値に
value="women,春夏"という２つカンマでつなげたい。
3:シーズンの全ての値は空にするので、全てをおしたらvalue=""にする。

現状、カテゴリーの値は１つだけ取り出すことができましたが、
2,3のパターンに難航しており、
カテゴリーを選択してからシーズンを選択するとvalueの値が、「WOMEN,」となり、再度シーズンをクリックすると「undefined,春夏」に
なります。
空やundefinedの値が入らないようにするにはどうのような方法がありますでしょうか。
ご教示いただけると幸いです。

HTML
1 <div class="menu-search">
2    
3    <!-- ▼▼　カテゴリタブ　▼▼ -->
4    <span class="menu-list-name">カテゴリー</span>
5    <div class="type-tab ta-tag">
6      <ul>
7        <li data-tag="WOMEN">WOMEN</li>
8        <li data-tag="MEN">MEN</li>
9        <li data-tag="KIDS">KIDS</li>
10      </ul>
11    </div>
12    <!-- ▼▼　シーズン　▼▼ -->
13    <div class="menu-list menu-list_st">
14      <div class="menu-list-filter">
15        <span class="menu-list-name">シーズン</span>
16        <ul class="season-tag ta-tag">
17          <li data-season-tag="春夏"><span>春夏</span></li>
18          <li data-season-tag="秋冬"><span>秋冬</span></li>
19          <li data-season-tag=""><span>すべて</span></li>
20        </ul>
21      </div>
22    </div>
23    <input type="hidden" name="ta" value="WOMEN">
24
25  </div>
26

javascript
1   <script type="text/javascript">
2    $(function () {
3      var $category = $('.type-tab li');
4      var $season = $('.season-tag li');
5      var $form = $('.menu-search');
6      var taValue = [];
7
8      // WOMEN,MEN,KIDSの値を配列に格納
9      var category = $category.map(function (){
10        return $(this).data('tag');
11      }).toArray();
12      console.log(category);
13
14      // 春夏,秋冬の値を配列に格納
15      var season = $season.map(function (){
16        return $(this).data('season-tag');
17      }).toArray();
18      console.log(season);
19
20      $('.ta-tag li').on('click', function(){
21        var categoryTag = $(this).data('tag');
22        var seasonTag = $(this).data('season-tag');
23        var inputValue = $('input[name="ta"]').val();
24
25
26        var categorySelect = category.filter(function(a){
27          return a === categoryTag;
28        });
29        var seasonSelect = season.filter(function(a){
30          return a === seasonTag;
31        });
32
33        if(categorySelect){
34          $form.find('input[name="ta"]').remove();
35          $form.append('<input type="hidden" name="ta" value="' + categorySelect + '" />');
36        }
37
38        // シーズンのとき
39        if(inputValue != seasonTag){
40          $season.on('click', function(){
41            $form.find('input[name="ta"]').remove();
42            $form.append('<input type="hidden" name="ta" value="' + categoryTag + ',' + seasonSelect + '" />');
43          });
44        }
45      });
46
47    });
48  </script>

m.ts10806

2020/10/03 22:45

>apend コードは間違ってませんがタイトルと本文間違ってます。修正願います。

kimisuke553

2020/10/03 23:01

有難うございます。タイトル、本文修正しました。よろしくお願いします。

行動規範の内容に同意します

回答2件

もともとの作りが悪く、下記の内容で作成し直してみました。

HTML
1<div class="menu-search">
2    
3    <!-- ▼▼　カテゴリタブ　▼▼ -->
4    <span class="menu-list-name">カテゴリー</span>
5    <!-- ▼▼　カテゴリタブ　▼▼ -->
6    <div class="type-tab ta-tag">
7      <ul>
8        <li data-tag="WOMEN">WOMEN</li>
9        <li data-tag="MEN">MEN</li>
10        <li data-tag="KIDS">KIDS</li>
11      </ul>
12    </div>
13
14    <!-- ▼▼　シーズン　▼▼ -->
15    <div class="menu-list menu-list_st">
16      <div class="menu-list-filter">
17        <span class="menu-list-name">シーズン</span>
18        <ul class="season-tag ta-tag">
19          <li data-tag="春夏"><span>春夏</span></li>
20          <li data-tag="秋冬"><span>秋冬</span></li>
21          <li data-tag=""><span>すべて</span></li>
22        </ul>
23      </div>
24    </div>
25
26    <input type="hidden" name="ta" value="WOMEN">
27
28  </div>

javascript
1$(function () {
2    var $form = $('.menu-search');
3    var $tag = $('.ta-tag li');
4
5    $('.ta-tag li').on('click', function() {
6      $(this).addClass('active').siblings().removeClass('active');
7
8      var category = $(this).text();
9      var values = [];
10      $tag.each(function(){
11        if ($(this).hasClass('active')) {
12          var categoryTag = $(this).data('tag');
13          if(categoryTag !== ''){
14            values.push(categoryTag);
15          }
16
17          var _values;
18          if(values.length > 1){
19            _values = values.join(',');
20          } else {
21            _values = values[0];
22          }
23
24          $form.find('input[name="ta"]').attr("value", _values);
25          console.log(values);
26        }
27      });
28    });
29  });

投稿2020/10/05 07:21

kimisuke553

総合スコア11

ベストアンサー

　空やundefinedの値が入らないよう

これだけじゃ意味が分からなかった...
もう少し具体的に記載下さい
なるべく原型を残したかったのですがダメでした
(残っているのは変数名ぐらい)

あとHTML表記も一部変更としています。

Javascript
1    $(function () {
2      var $category = $('.type-tab li');
3      var $season = $('.season-tag li');
4      var $form = $('.menu-search');
5      var taValue = [];
6
7      // WOMEN,MEN,KIDSの値を配列に格納
8      var category = $category.map(function (){
9        return $(this).data('tag');
10      }).toArray();
11
12      // 春夏,秋冬の値を配列に格納
13      var season = $season.map(function (){
14        return $(this).data('season-tag');
15      }).toArray();
16
17      $('.ta-tag li').on('click', function(){
18        var categoryTag = $(this).data('tag');
19        var seasonTag = $(this).data('season-tag');
20        taValue = [];
21		if(categoryTag !== undefined){
22			// カテゴリーをクリックしたとき
23			$form.find('.type-tab li').each(function(){
24				if($(this).data('tag') == categoryTag){
25					$(this).attr('data-select', 'true');
26					if (categoryTag != '') taValue.push(categoryTag);
27				}else{
28					$(this).attr('data-select', 'false');
29				}
30			});
31		}else{
32			if($form.find('.type-tab li[data-select="true"]').length == 1){
33				categoryTag = $form.find('.type-tab li[data-select="true"]').data('tag');
34				if (categoryTag != '') taValue.push(categoryTag);
35			}
36		}
37		if(seasonTag !== undefined){
38			// シーズンをクリックしたとき
39			$form.find('.season-tag li').each(function(){
40				if($(this).data('season-tag') == seasonTag){
41					$(this).attr('data-select', 'true');
42					if (seasonTag != '') taValue.push(seasonTag);
43				}else{
44					$(this).attr('data-select', 'false');
45				}
46			});
47		}else{
48			if($form.find('.season-tag li[data-select="true"]').length == 1){
49				seasonTag = $form.find('.season-tag li[data-select="true"]').data('season-tag');
50				if (seasonTag != '') taValue.push(seasonTag);
51			}
52		}
53		$form.find('input[name="ta"]').attr("value", taValue.join(','));
54      });
55    });
56

HTML
1 <div class="menu-search">
2
3    <!-- ▼▼　カテゴリタブ　▼▼ -->
4    <span class="menu-list-name">カテゴリー</span>
5    <div class="type-tab ta-tag">
6      <ul>
7        <li data-tag="WOMEN" data-select="true">WOMEN</li>
8        <li data-tag="MEN" data-select="false">MEN</li>
9        <li data-tag="KIDS" data-select="false">KIDS</li>
10      </ul>
11    </div>
12    <!-- ▼▼　シーズン　▼▼ -->
13    <div class="menu-list menu-list_st">
14      <div class="menu-list-filter">
15        <span class="menu-list-name">シーズン</span>
16        <ul class="season-tag ta-tag">
17          <li data-season-tag="春夏" data-select="false"><span>春夏</span></li>
18          <li data-season-tag="秋冬" data-select="false"><span>秋冬</span></li>
19          <li data-season-tag="" data-select="true"><span>すべて</span></li>
20        </ul>
21      </div>
22    </div>
23    <input type="hidden" name="ta" value="WOMEN">
24
25  </div>