セレクトボックス同士の連動 linked selectbox

セレクトボックスのある値を選択すると、別のセレクトボックスがその値に応じて内容が変わるスクリプトをご紹介します。
ここでご紹介するセレクトボックスの連動は、1対1を対象としています。

元のセレクトボックスのvalue属性値とoptgroupのlabel属性値を比較して一致したものを表示するような仕組みです。

デモ

 

関数定義とHTMLの準備

関数定義

JavaScript

HTMLの準備

label属性には切り替え元のターゲットであるoptionのvalue値を指定します。

使い方

引数にはオプションをハッシュ(連想配列)で渡します。

オプション

設定値 初期値 説明
actionTargetName '' アクションを起こすセレクトボックスのname属性値
changeTargetName '' option要素を切り替えるセレクトボックスのname属性値
stockFirstElement true option要素を切り替えるセレクトボックスの最初の要素を維持するかどうか

JavaScript逆引きリファレンス一覧へ戻る