動的セレクトボックスのSelectedについて
以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。
<html>
<head>
<script type="text/javascript"><!--
function SelectOption(parentValue, text, title, value, style) {
this.parentValue = parentValue;
this.setOption = function() {
this.text = text;
this.value = value;
this.title = title;
if(style) {
this.style.cssText = style;
}
};
return this;
}
function SelectBox(id) {
function getObject() {
var obj = document.getElementById(id);
if(!obj.options && ( (typeof obj.length) == "number") ) {
if(obj.length > 0) {
obj = obj[0];
} else {
obj = null;
}
}
return obj;
}
var options = [];
this.registOption = function(option) {
options[options.length] = option;
};
var child = null;
this.setChild = function(childObj) {
child = childObj;
};
this.make = function(parentValue) {
var obj = getObject();
if(obj) {
obj.options.length = 0;
var opt = (parentValue != null) ? [] : options;
if(parentValue != null) {
for(var i = 0; i < options.length; i++) {
if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) {
opt[opt.length] = options[i];
}
}
}
obj.options.length = opt.length;
for(var i = 0; i < opt.length; i++) {
opt[i].setOption.call(obj.options[i]);
}
if(child) {
child.make(obj.value);
}
}
};
return this;
}
var box1 = new SelectBox("sb1");
box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;"));
box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1"));
box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2"));
var box2 = new SelectBox("sb2");
box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;"));
box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1"));
box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2"));
box1.setChild(box2);
window.onload = function() {
box2.make("1");
};
//--></script>
</head>
<body>
<form>
<select id="sb1" onchange="box2.make(this.value);"></select>
<select id="sb2"></select>
</select>
</form>
</body>
</html>
お礼
早い回答ありがとうございます。 なるほど、「null」のダイアログボックスは2回目の関数呼び出し時でしたか。勝手にnullになってしまうなんてとんだ勘違いでしたねｗｗ。 その点を踏まえてプログラムを見直した結果正常に動作させることができました。 ただし、次回呼び出し時に「null」が返ってくる理由としては、2回目は別の要素から引数をとっていたのですが、その要素のstyleをhtmlタグではなく、スタイルシートで指定していたことが原因のようでした。 タグ内にstyle="backgroundColor=○○;"と書き足すことによって正しく動作しました。 とは言え教えて頂いた点には非常に助けられました。 ありがとうございました。