動的セレクトボックスの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>
お礼
ありがとうございました！ これからとても役立ちそうです。