HTML

トップ > チップス > HTML

連動するセレクトボックス

一方の選択状態に応じて、もう一方の選択内容が変化するセレクトボックスをJavaScriptで実装した例です。全て場合の選択肢を配列で保持しています。選択肢が非常に多くなる場合は、サーバとの非同期通信も必要になるでしょう。

動作例

選択して下さい肉魚 選択して下さい

コード

function updateCombo(){
  var combo1 = document.getElementById("combo1");
  var combo2 = document.getElementById("combo2");
  // combo2.removeAttribute("disabled"); // didn't work
  combo2.disabled = false;
  for(i = combo2.childNodes.length-1;i >= 0;i--){
    combo2.removeChild(combo2.childNodes[i]);
  }
  var option_empty = document.createElement("option");
  option_empty.appendChild(document.createTextNode("選択して下さい"));
  option_empty.selected = "selected";
  combo2.appendChild(option_empty);

  if($("#combo1").val() == "肉"){
    appendOptions(combo2,new Array("牛","豚","鶏"));
  }else if($("combo1").val() == "魚"){
    appendOptions(combo2,new Array("鰯","鱸","鰹","鰤"));
  }else{
    combo2.disabled = true;
  }
return true;
}

function appendOptions(e,values){
  for(i = 0;i < values.length;i++){
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(values[i]));
    e.appendChild(option);
  }
}
<select id="combo1" onchange="updateCombo()">
  <option>選択して下さい</option>
  <option>肉</option>
  <option>魚</option>
</select>
 
<select id="combo2" disabled="disabled">
  <option>選択して下さい</option>
</select>


IEのための注意事項

disabled属性にはtrueまたはfalseを代入しましょう。正直に"disabled"という文字列を入れたり属性を消したりしてもIEでは動作しません。

e.disabled = true; // ○ FF,IEとも動作
e.disabled = "disabled"; // × FFのみ動作


フォーム内要素（ここではselect）で選択されている値を取得する方法がよく分かりません。今回jquery(1.9.1)の力を借りて突破しています。

alert($("#foo").val()); // ○ FF,IEとも動作（但し、jquery-1.9.1.min.jsが必要）
alert(document.getElementById("foo").value); // × FFのみ動作


参考URL

元々は以下のURLで公開されていたものを転載しています。以前のバージョンではprototype.jsを使って値を取得していましたが、趨勢は明らかにjQueryですので、jQueryを使った方法に書き換えています。勿論、これらのライブラリに依存しない書き方もあるはずです。

http://lumber-mill.co.jp/gallery/view/portfolio/yosei/js/combobox

• タグ別一覧: [html] [js]
• チップス一覧