ラジオボタンでセレクトメニューの内容を変更

▼ソース

<head>
<SCRIPT language="JavaScript">
<!--
function listkey(){
  var i;
  var opn = document.check;
  var ope = opn.key;
  var n = -1;
//ラジオボタンの選択状況をチェック
  for( i=0; i<=opn.list.length -1; i++){
    if(opn.list[i].checked) n = i;
  }
  relist(ope);
  if(n != -1){
    mykey = n;
    if(mykey == 0){
      list_key1(ope);
    }else if(mykey == 1){
      list_key2(ope);
    }else if(mykey == 2){
      list_key3(ope);
    }
  }
}
//セレクトメニューをリセットして1行目を表示
function relist(sel) {
  sel.selectedIndex = 0;
}
//リスト1を選択
function list_key1(lis) {
  lis.options.length = 2;
  lis.options[0].text = "リスト1-1";
  lis.options[1].text = "リスト1-2";
}
//リスト2を選択
function list_key2(lis) {
  lis.options.length = 3;
  lis.options[0].text = "リスト2-1";
  lis.options[1].text = "リスト2-2";
  lis.options[2].text = "リスト2-3";
}
//リスト3を選択
function list_key3(lis) {
  lis.options.length = 4;
  lis.options[0].text = "リスト3-1";
  lis.options[1].text = "リスト3-2";
  lis.options[2].text = "リスト3-3";
  lis.options[3].text = "リスト3-4";
}
window.onload=listkey;
//-->
</SCRIPT>
</head>
<body>
<form name=check>
<input type=radio value=0 name=list onclick=listkey() checked>リスト1
<input type=radio value=1 name=list onclick=listkey()>リスト2
<input type=radio value=2 name=list onclick=listkey()>リスト3
<p>
<select name=key>
<option selected>検索項目<option>
<option>
<option>
</select>
</form>
</body>


▼サンプル

サンプルを表示する

コメント