jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

SELECTボックスを選択したら次のSELECTボックスを表示し、選択済みの値は次のSELECTに表示しない

2015年10月29日
この記事は掲載から489日経過しています。
情報が古い可能性が有りますのでご了承下さい

タイトルが長すぎですが、例えば複数のプランを選択させる際に、SELECTボックスをずら~と表示しても良いのですが、同じプランを選択させたくない場合が有ります。

先ずはサンプル

SELECTさせるのは都道府県にし、最大で5つまでとしました。1つ目を選択すると次のSELECTボックスが表示され、前に選択した値を除外します。また、選択済みのSELECTボックスを再選択した場合は、それ以降を初期化します。

全体のコード

SELECTに設定する配列はご覧の通り都道府県です。

SELECTボックスのHTML

jQueryで追加していっても良いのですが、POSTで戻った場合など、jQueryを走らせるよりPHPで処理した方が楽なので、必要な分だけ直で書いています。あと、1番目以降はCSSで非表示に。

 

一軒目のSELECTボックスに都道府県を設定する

そのfunction set_pref

説明が前後しますが、選択済みの都道府県はis_selectにpushしてるので、それを除外しています。

 

セレクトボックスを選択した時の処理

何個か選択した後に、最初のセレクトボックスを変更した場合は、それ以降を初期化して非表示にします。

これは5コ選択中のとき、3コ目を再選択した場合の処理です。自身以降を初期化します。また、自身を空にした場合と別な都道府県を選択した場合では表示方法が変わります。

最初に max=5としているので、それ以降はセレクトボックスの追加処理は行いません。

 

簡単に言えば、選択済みの都道府県をis_select配列に追加していき、inArrayでマッチしたものを除外して選択肢としてインサートしていくだけです。

私的&クライアント的に利用頻度の高い処理なのですが、その都度書いていたりしたので、纏めておきます。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP