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>");
}
上記処理だと、「対応したカラーのサイズを表示する」という
目的は達成できますが、カラーを選択すると
ページ全部がサイズに上書きされ、サイズのセレクトボックスしか
表示されません。
当たり前ですが・・・
いろいろ試してみましたが、どれもうまく行きませんでした。
何か良いアドバイスがあればご教授下さい。
よろしくお願い致します。
お礼
ご回答、ありがとうございます。 カラーボックスは耐久性に難があり、本体がカラーボックスで、パーツ追加は、考えておりません。 同サイズで頑丈なものを探しております。 いい物がありましたら、また情報をよろしくお願いいたします。