PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

【JQuery】全てのセレクトボックスが選択されているか判定する。

f:id:PeaceJet:20180303175045p:plain

複数のセレクトボックス

セレクトボックスが複数ある場合で、少なくともどれか一つの値が選択されているかどうかを調べてみたいと思います。

おそらく、何種類かやり方はあるかと思っているのですが・・・。

2つの配列を作成して判定したいと思います。

<div id="select">
  <div id="SelectWrapFirst">
    <select name="first">
      <option value="">選択してください</option>
      <option value="aaa_1">aaa_1</option>
      <option value="aaa_2">aaa_2</option>
      <option value="aaa_3">aaa_3</option>
    </select>
  </div>
  <div id="SelectWrapSecond">
    <select name="second">
      <option value="">選択してください</option>
      <option value="bbb_1">bbb_1</option>
      <option value="bbb_2">bbb_2</option>
    </select>
  </div>
  <div id="SelectWrapThird">
    <select name="third">
      <option value="">選択してください</option>
      <option value="ccc_1">ccc_1</option>
      <option value="ccc_2">ccc_2</option>
    </select>
  </div>
</div>
<div>
  <button type="button" name="button">確認</button>
</div>
$(fucntion() {

  //ボタンを押して確認するようにしています。
  $('button[name="button"]').on("click", function() {
    
    //要素を入れる配列:myArray    
    var myArray = new Array();
    $("#select option:selected").map(function () {
      myArray.push($(this).val());
    });
    
    var x = new Array();
    for (var i in myArray) {
      if (myArray[i] !== "") x.push(myArray[i]);
    }
    //空文字を削除した新たな配列:x

    //$.isEmptyObject
    if ($.isEmptyObject(x) === false) {
      //なにか処理を書く。
      console.log("少なくても一つは、選択されています。")
    }

  myArray = [];

  });

});
/* ブログタイトルを取得 */