SelectボックスおよびJavascriptのカスタマイズ

Question

どうしてもわからなく、ご教授願えれば幸いです。
下記のように、複数のselectがありまして、その全部のselectから２つの項目だけ選択できるように上限数を設けて設定しておりますが、各selectの最初の「<option>カラーを選択</option>」を項目として表示はさせたいのですが、選択から除外しまして、選択してもカウントされないようにしたいと思います。
「<option>カラーを選択</option>」以外の項目から２項目選べるようにしたいのですが、どうしてもわかりません。どなたかご教授いただければ幸いでございます。

<script type="text/javascript">
jQuery(function($){
  var same=2; //上限数
  $('.optionSelect').on('focus',function(){
    $(this).data('val',$(this).val()); // 元の値を覚えておく
  }).on('change',function(){
    var v=$('.optionSelect').map(function(){
      return $(this).val();
    }).get().filter(function(i,j,k){
      return k.indexOf(i)==j;
    });
    if(v.length>same){
      alert('カラーは2色まで選択可能です');
      $(this).val($(this).data("val"));
    };
  });
});
</script>

<select class="optionSelect" name="親指外">
<option>カラーを選択</option>
            <option value="ホワイト">ホワイト</option>
            <option value="イエロー">イエロー</option>
            <option value="ピンク">ピンク</option>
            <option value="オレンジ">オレンジ</option>
            <option value="レッド">レッド</option>
            <option value="パープル">パープル</option>
            <option value="スカイブルー">スカイブルー</option>
            <option value="ブルー">ブルー</option>
            <option value="ネイビー">ネイビー</option>
            <option value="グリーン">グリーン</option>
            <option value="ブラック">ブラック</option>
            <option value="シルバー">シルバー</option>
            <option value="ゴールド">ゴールド</option>
</select>

<select class="optionSelect" name="親指内">
<option>カラーを選択</option>
            <option value="ホワイト">ホワイト</option>
            <option value="イエロー">イエロー</option>
            <option value="ピンク">ピンク</option>
            <option value="オレンジ">オレンジ</option>
            <option value="レッド">レッド</option>
            <option value="パープル">パープル</option>
            <option value="スカイブルー">スカイブルー</option>
            <option value="ブルー">ブルー</option>
            <option value="ネイビー">ネイビー</option>
            <option value="グリーン">グリーン</option>
            <option value="ブラック">ブラック</option>
            <option value="シルバー">シルバー</option>
            <option value="ゴールド">ゴールド</option>
</select>

<select class="optionSelect" name="人指し指内">
<option>カラーを選択</option>
            <option value="ホワイト">ホワイト</option>
            <option value="イエロー">イエロー</option>
            <option value="ピンク">ピンク</option>
            <option value="オレンジ">オレンジ</option>
            <option value="レッド">レッド</option>
            <option value="パープル">パープル</option>
            <option value="スカイブルー">スカイブルー</option>
            <option value="ブルー">ブルー</option>
            <option value="ネイビー">ネイビー</option>
            <option value="グリーン">グリーン</option>
            <option value="ブラック">ブラック</option>
            <option value="シルバー">シルバー</option>
            <option value="ゴールド">ゴールド</option>
</select>

<select class="optionSelect" name="人指し指外">
<option>カラーを選択</option>
            <option value="ホワイト">ホワイト</option>
            <option value="イエロー">イエロー</option>
            <option value="ピンク">ピンク</option>
            <option value="オレンジ">オレンジ</option>
            <option value="レッド">レッド</option>
            <option value="パープル">パープル</option>
            <option value="スカイブルー">スカイブルー</option>
            <option value="ブルー">ブルー</option>
            <option value="ネイビー">ネイビー</option>
            <option value="グリーン">グリーン</option>
            <option value="ブラック">ブラック</option>
            <option value="シルバー">シルバー</option>
            <option value="ゴールド">ゴールド</option>
</select>

<select class="optionSelect" name="中指内">
<option>カラーを選択</option>
            <option value="ホワイト">ホワイト</option>
            <option value="イエロー">イエロー</option>
            <option value="ピンク">ピンク</option>
            <option value="オレンジ">オレンジ</option>
            <option value="レッド">レッド</option>
            <option value="パープル">パープル</option>
            <option value="スカイブルー">スカイブルー</option>
            <option value="ブルー">ブルー</option>
            <option value="ネイビー">ネイビー</option>
            <option value="グリーン">グリーン</option>
            <option value="ブラック">ブラック</option>
            <option value="シルバー">シルバー</option>
            <option value="ゴールド">ゴールド</option>
</select>

Answer 1

.filter() を呼んでいるので一緒に除外してしまえばいいのでは？

.filter(function(i, j, k) {
    return i !== 'カラーを選択' && k.indexOf(i) == j;
});

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Comments

[Hotti]

ありがとうございます。
シンプルな解決法でわかりやすいです。
こちらも後ほど試してみたいと思います。
取り急ぎありがとうございました。

Answer 2

こんにちは。

なるべく、ご質問にあるコードを活かして、修正を最小限に留めるという方針で、以下の修正案を考えました。
var v を作るところを、以下のような修正でいかがでしょうか？

修正前：

var v=$('.optionSelect').map(function(){
      return $(this).val();
    }).get().filter(function(i,j,k){
      return k.indexOf(i)==j;
    });

　　
修正後：

var v = $('.optionSelect').map(function() {
        return $(this).val();
    }).get();    
    
v = [...new Set(v.filter(x => x !== 'カラーを選択'))];

すなわち、 .get() までで得られた v に対して、'カラーを選択'を除き、かつ重複を除く という処理をした配列を作り、v に再度代入します。これを以下

v = [...new Set(v.filter(x => x !== 'カラーを選択'))];

で行っています。
以下は、上記の修正後を確認するサンプルです。

• https://jsfiddle.net/jun68ykt/40L2dxvg/4/

参考になれば幸いです。

Comments

[Hotti]

非常にわかりやすくご説明いただきまして誠にありがとうございます。
いただいた内容で問題なく動作いたしました。
ありがとうございました。
今一度、自分の中で消化して理解をしたいと思います。
とりいそぎありがとうございました。

[jun68ykt]

どういたしまして。
解決されたようで、よかったです。
配列 ary があったときに、（順番はどうなってもいいので）aryの要素を重複なく含む配列が欲しいときに

[...new Set(ary)]

は、覚えておいてよいかもです。

Answer 3

<option value="">カラーを選択</option>
のようにして「valueが空ではない」をカウントの際の条件に追加

Comments

[Hotti]

ありがとうございます。
空でない項目のみカウントするようなイメージでしょうか。
すいません、ヒントをいただいているにもかかわらず、
コードを書くに至らず、お恥ずかしい限りです。

[m.ts10806]

なるほど。このコードを書かれた方ならピンと来るかなと思ったのですが・・
既に別回答にあるようにfilterでやり切ったほうが楽ですね。