JSでセレクトボックスの内容を切り替えたい

質問

年末を向かえましたが、クリアできない問題を抱えて焦っています。

あるショッピングサイトを構築しておりますが、
商品詳細ページでカラーを選択するとそれに対応したサイズを
表示させたいと思っています。

カラー、サイズ共に異なるセレクトボックスを使用しております。

//サンプルデータ（2次元配列）
var dataStock = new Array(new Array("ブラック", "S", 2),
new Array("ブラック", "M", 3),
new Array("ホワイト", "S", 1),
new Array("ホワイト", "M", 2),
new Array("ホワイト", "L", 1),
new Array("レッド", "M", 3),
new Array("レッド", "L", 2));

var dataSize = new Array();

//----------------- とりあえずデータ表示 -----------------
document.write("<table border='1'>");
for(i=0; i<data.length; i++) {
document.write("<tr>");
for(n=0; n<data[i].length; n++) {
document.write("<td>"+data[i][n]+"</td>");
}
document.write("</tr>");
}
document.write("</table><br /><br />");

//----------------- カラー表示 -----------------
document.write("<select name='color' onchange=getNo2(this.value);>");
for(i=0; i<data.length; i++) {
document.write("<option value='"+data[i][0]+"'>"+data[i][0]+"</option>");
}
document.write("</select><br /><br />");

//----------------- サイズ表示 -----------------
function getNo2(color) {
document.write("<select name='size'>");
for(i=0; i<data.length; i++) {
//↓2次元配列から選択したカラーの情報を取得
if(color == data[i][0]) {
dataSize[i] = data[i][1];
document.write("<option value='"+dataSize[i]+"'>"+dataSize[i]+"</option>");
}
}
document.write("</select>");
}

上記処理だと、「対応したカラーのサイズを表示する」という
目的は達成できますが、カラーを選択すると
ページ全部がサイズに上書きされ、サイズのセレクトボックスしか
表示されません。
当たり前ですが・・・

いろいろ試してみましたが、どれもうまく行きませんでした。

何か良いアドバイスがあればご教授下さい。
よろしくお願い致します。

回答No.1

15mm

ＤＯＭで<option>要素を生成していくといいと思います。

改良するついでに配列生成の処理速度向上してみました（余計なお世話？）
記述が面倒だったのでsizeのほうはid指定も増えてますが、
nameからのＤＯＭ操作に変更しても問題ありません。

//サンプルデータ（2次元配列）
var data = [["ブラック", "S", 2],
["ブラック", "M", 3],
["ホワイト", "S", 1],
["ホワイト", "M", 2],
["ホワイト", "L", 1],
["レッド", "M", 3],
["レッド", "L", 2]];

var dataSize = [];

//----------------- とりあえずデータ表示 -----------------
document.write('<table border="1">');
for(i=0; i<data.length; i++) {
document.write("<tr>");
for(n=0; n<data[i].length; n++) {
document.write("<td>"+data[i][n]+"</td>");
}
document.write("</tr>");
}
document.write("</table><br /><br />");

//----------------- カラー表示 -----------------
document.write('<select name="color" onchange="getNo2(this.value);">');
for(i=0; i<data.length; i++) {
document.write('<option value="'+data[i][0]+'">'+data[i][0]+"</option>");
}
document.write('</select><br /><br /><select name="size" id="size" style="display:none;">');

//----------------- サイズ表示 -----------------
function getNo2(color) {
with(document.getElementById('size')){style.display='inline';innerHTML=''}
for(i=0; i<data.length; i++) {
//↓2次元配列から選択したカラーの情報を取得
if(color == data[i][0]) {
dataSize[i] = data[i][1];
document.getElementById('size').appendChild(opt=document.createElement('option'))
opt.value=dataSize[i];opt.text=dataSize[i]
}
}
}

カラー選択において、
・一つ目のオプション（例でいうとブラックの一つ目）を選択するには他を選択してから、という手間がある
・同じカラーが何度も出てくるがどれを選択しても挙動が同じ
という点が気になりましたが、いかがでしょうか

お礼

15mm様

お返事が遅くなってしまい大変申し訳ございません。

ご教授いただいた内容、申し分ありませんでした！
とても的確で分かりやすい内容です！
ほんとうに助かり、良い年を迎えられそうです！

＞同じカラーが何度も出てくるがどれを選択しても挙動が同じ
に関してはPHPで配列の重複をグルーピングしているので、
実際は問題ありません。