JavaScriptでのコンボボックスの連動

Pocket
このエントリーをはてなブックマークに追加

※他Blogリニューアルの為、記事を転載

同じ値が設定されているコンボボックスが2つあり、

一方が選択されたら、もう一方も全く同じ値を表示するようにしたい場合、どうしたらよいか。

一覧が表示されるようなページでヘッダとフッタにこんなのがあったりしますな。

で、こんな感じ。

【ヘッダーコンボボックス】

<select name=”combo” onChange=”chCombo(‘header’);” id=”header”>

  <option value=”1″>1

  <option value=”2″>22

  <option value=”3″>333

  <option value=”4″>4444

  <option value=”5″>55555

</select>

【フッターコンボボックス】

<select name=”combo” onChange=”chCombo(‘footer’);” id=”footer”>

  <option value=”1″>1

  <option value=”2″>22

  <option value=”3″>333

  <option value=”4″>4444

  <option value=”5″>55555

</select>

【選択時に実行されるスクリプト】

function chCombo(type) {

  if (type==”header”) {

    document.getElementById(“footer”).selectedIndex = document.getElementById(“header”).selectedIndex;

  } else {

    document.getElementById(“header”).selectedIndex = document.getElementById(“footer”).selectedIndex;

  }

}

今日はこんな感じで。

でわ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です