セレクト選択内容によって他のセレクト表示内容を変更する方法

[新着] Webテンプレートを仮オープンしました



0   名前: ishikawa : 2006/11/04(土) 13:54  ID:NKwRjL2C
最近HTMLやJavaScriptを勉強し始めた初心者です。
恐れ入りますが、ご回答を頂けたら幸いに存じます。

現在、セレクトタグの選択内容によって他のセレクトタグの表示内容を変更する方法を模索しています。

ネット検索や書籍を読んで、以下の手段で実現できることを知りました。

<html>
<HTML>
<SCRIPT TYPE="text/javascript">

var s = new Array;
s[0] = new Array('千葉','東京','群馬');
s[1] = new Array('大阪','京都');

function Change(n){
 index = n.state.selectedIndex;
 for(i=0;i < 3;i++){
  n.ken.options[i].text=s[index][i];
 }
}
</SCRIPT>
</HEAD>

<BODY>
<form>
<select name="state" onchange="Change(this.form)">
 <option>関東
 <option>関西
</select>
<select name="ken">
 <option>千葉
 <option>東京
 <option>群馬
</select>
</form>
</BODY>

</html>

しかし、この方法だと変更されるセレクト側のデフォルトoption数に依存して新しく更新した値が表示されるようで、新しく表示するoption数が少ない場合undefinedが補足されて表示されます。また、新しく表示するoption数がデフォルトoption数より多い場合、デフォルトoption数分の値しか表示されません。
デフォルトoption数に依存してしまう問題を解決したいと思っているのですが、よい方法はありませんでしょうか?

恐れ入りますが、アドバイスをいただけたら幸いです。
よろしくお願いいたします。

1   名前: 牛若 : 2006/11/04(土) 13:54  ID:G7RZFF3H
new Option()

2   名前: m035 ◆Wpzr1YKOiq : 2006/11/04(土) 13:54  [URL]  ID:5d.jrAEH
function Change(n){
 index = n.state.selectedIndex;
 n.ken.options.length=s[index].length;
 for(i=0;i <s[index].length;i++){
  n.ken.options[i]=new Option(s[index][i],s[index][i]);
 }
}

とすれば良いかと。
また、new Optionについては以下参照。
http://suac.net/1106/johoB/JavaScript/jscripto.html#option

3   名前: m035 ◆Wpzr1YKOiq : 2006/11/04(土) 13:54  [URL]  ID:5d.jrAEH
それと、
<html>
<HTML>


<html>
<head>

では?
あと、Scriptは念のためコメントアウトしておいたほうが良いかと思います。

4   名前: ishikawa : 2006/11/04(土) 13:54  ID:NKwRjL2C
牛若様、m035様、ご返信・ご指摘、大変ありがとうございました。
問題を解決することができました。

以降、投稿する場合はScriptをコメントアウトいたします。
的確なアドバイスをいただき、誠にありがとうございました。

一覧へ戻る