select2のチェックボックスから取得した値がカンマで出力される

Question

使用プラグイン　select2　
参考サイト

＊＊＊実現したいこと＊＊＊
参考サイトのDestination=>USAをクリックするとUSAに関連する記事が表示されます。これを複数選択可能にして、複数選択した国に関連する記事を表示させたいです。
ロジックとしては、チェックボックスをクリックしたら、設定されたvalueの値(63, 440, 381...etc)を取得
クリックするたびにそれらの値を配列に格納
class .category__posts .post内にある投稿の値(63, 440, 381...etc)と一致するか確認
取得した値と投稿の値が一致したら、その投稿だけを表示させる。

select2で生成されたチェックボックスをクリックして値を取得できますが、2回目以降に取得できる値はカンマと一緒に自動的に出力されるので、そのカンマを削除したいです。
カンマがあることによって配列の要素として１つ１つ追加できない状態です。

配列に追加したい理由は、複数選択した際にその取得した複数の値を配列に格納して、それを１つ１つ .category__posts .post内にある投稿の値と比較するために配列が必要だと考えました。もし他にもっと簡単なロジックがあれば、ぜひそちらで実装もしたいと考えています。

＊＊＊現在の状況＊＊＊
チェックボックスをクリックしたら、valueに設定した値(64や440...etc)などが取得できています。しかしそれらの値を配列に追加してforEachで１つ１つ出力すると、スクリーンショットのように取得できた値がカンマと一緒に出力されます。これはプラグインselect2の初期設定が原因と考えましたが、ドキュメントにはそういうことは記載されてなく、stackoverflowにもこれに関することは見つけられませんでした。もしくはチェックボックスが吐き出す特別なものでしょうか？

アドバイスや他の方法がある場合、ご教授いただけると幸いです。

// category.php
<div class="category__filter filter__destination" data-destination>
          <div class="category__filter__dropdown">
            <select class="select2" id="select2" multiple>
            <option value="">Destination</option>
              <?php $destinations = get_categories(array(
                  'parent' => 15,
                  'orderby' => 'name',
                  'hide_empty' => 1,
                  'post_status' => 'publish'
               ));
              foreach ($destinations as $dest) : ?>
                   <option class="category__filter__dropdown__option" value="<?php echo $dest->term_id; ?>" data-destination="<?php echo $dest->term_id; ?>">
                     <?php echo $dest->name; ?> (<?php echo $dest->category_count; ?>)
                   </option>
              <?php endforeach; ?>
            </select>
          </div>
      </div>

.... --- 一部省略 ----


<div class="category__posts">
  <?php while ( have_posts() ) : the_post();
   $stars = get_field('sterne');
   $categories = get_relevant_categories(get_the_ID());
  ?>
 
  <div id="<?php echo get_post_field( 'post_name', get_the_ID() ); ?>" class="post animated" data-animation="animation-fade-in"
  data-reisethema="<?php if ($categories['reisethema']) echo $categories['reisethema']->term_id; ?>"
  data-destination="<?php if ($categories['destination']) echo $categories['destination']->term_id; ?>">

..

// main.js
$(document).ready(function() {
  let selectDest = $(".select2").select2({
    placeholder: "DESTINATION",
    allowClear: true
    // tags: [],
    // tokenSeparators: [" "],
    // separator: " "
  });

  selectDest.on("select2:select", function(e) {

    let groupID = [];

    // 1) Get selected option's IDs
    let selectedID = $(this).val();
    console.log("you chose " + selectedID); // you chose 63...

    groupID.push(selectedID);
    console.log(groupID); // ["63", "440", "381"]

    groupID.forEach(function(id, index) {
      console.log(id);
      console.log("index is " + index); // return always 0, it means there is only one value?
    });

    // Do filter in class ".category__posts .post" and get each posts's ID. return matches IDs
    // Compare each ID from groupID Array and ".category__posts .post"
    const filteredPosts = $(".category__posts .post").filter(function(
      val,elem) {
      let eachPostIDs = $(elem)
        .data("destination")
        .toString();

      　return eachPostIDs === selectedID;
    });

　　 // IDが一致したのを表示
    filteredPosts.fadeIn();

　　 // IDが不一致したのは非表示
    $(".category__posts .post")
      .not(filteredPosts)
      .fadeOut(function() {
        $(window).trigger("scroll");
      });
  });
});

Comments

[KoichiSugiyama]

クリックするたびに、前回の配列に追加する、というような処理にしたいということでしょうか？クリックしたタイミングで選択されているものを使って都度配列を作り直した方が、選択解除された場合などを考えるとすっきりしたロジックになるのではないかと思います。何か配列に追加しなければならない事情があるのでしたら、そちらについても記載していただければそれに沿ったアドバイスをもらえるかもしれません。

[tomtom199]

はい、まさに「クリックするたびに、前回の配列に追加する」という処理を考えていましたが、これ以外の方法が思いつかず、先のことまでまだ考えられていなかったです。なので毎回配列を作り直すということもわからなかったです。。
配列に追加したい理由は、複数選択した際にその取得した複数の値を配列に格納して、それを１つ１つ .category__posts .post内にある投稿の値と比較するために配列が必要だと考えました。もし他にもっと簡単なロジックがあれば、ぜひそちらで実装もしたいと考えています。

Answer 1

自己解決できました。
クリックして取得したIDを文字列に変換してから、splitで配列に１つ１つ格納しました。
そのあとでfilterを使って、それぞれ一致するIdだけを取り出すことができました。

let selectedID = $(this).val(); // 63,440...
let ArrSelectedID = selectedID.toString().split(",");

const filteredPosts = $(".category__posts .post").filter(function(val) {
  let eachPostIDs = $(this).data("destination");
  let postIDarr = eachPostIDs.toString().split(",");

  const intersection = ArrSelectedID.filter(function(n) {
     return postIDarr.indexOf(n) !== -1; // return true
   });

   if (intersection != false) {
     return true;
   } else {
     return false;
   }
});

Answer 2

str.split(",")で文字列は分解できます。なので、あとはそれでループすればいけるのではないかと。

arrayならばforEachなどで展開したらいいかと思います。

Comments

[tomtom199]

コメントありがとうございます！
値がpushされた後に実行しましたが、"t.split is not a function"とエラーが表示されます。エラーの解決方法を探してみます。
groupID.push(selectedID);
groupID.split(" , ");

文字列に変換してからsplitを実行しましたがコンマで分割されず、idが１つ１つ出力されずに取得した全ての値が出力されました。
出力されるべき結果は、
id is 63
id is 440 ...
などですよね？
私の見解が間違っていたらご指摘もお願いします。????
groupID.forEach(function(id, index) {
let test = id.toString().split(",");
console.log("id is " + test); // id is 63,440
console.log("index is " + index); // return always 0, it means there is only one value
});

[FKM]

すみません。splitは文字列を分割するので、既にオブジェクト化している状態なら、それをforEachなり、forなりで展開すればいいだけですね。