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

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

同じ値が設定されているコンボボックスが２つあり、
一方が選択されたら、もう一方も全く同じ値を表示するようにしたい場合、どうしたらよいか。

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

で、こんな感じ。

【ヘッダーコンボボックス】
<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;
  }
}

今日はこんな感じで。

でわ。