New OPTIONで作った<Select>の<optgroup>の設定

質問

お世話になります。

動的に<Select>を作成したく、new option で<option>を作成しておりますが、
このnew option で作成した<option>を<optgroup>にする方法がわかりません。

教えてください、宜しくお願いします。

回答No.2

steel_gray · ベストアンサー

なんだかlinesとかいきなり出てくるし、どういうscriptかわかりませんが、

var oSelect = document.getElementById('select_bbb');
oSelect.removeChild(oSelect.firstChild);
これをfunction aaaの最初に入れれば削除してから追加する事になるかと思います。

回答No.1

steel_gray

new optionで作る、というのが具体的にどういうコードで作っているかわかりませんが、
optgroupとoptionは別種のエレメントですから、作ったものを変化させる事はできません。
http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-94282980

createElementとかでoptgroupを作ってはどうでしょうか。
http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#method-createElement

補足

お世話になります。

コードは以下です。

<script type="text/javascript">

function aaa(){

var oGroup = document.createElement('optgroup');
oGroup.label = "▼選択";

for(i=0; i<lines.length; i++) {

if(lines[i] == '') {

break;

}

var parts = lines[i].split(",");

var kamokusyubetu_code = parts[0];

var kamokusyubetu_name = parts[1];

var j=i+1;

var oOption = document.createElement('option');
oOption.value = code;
oOption.innerHTML = name;
oGroup.appendChild(oOption);

}
var oSelect = document.getElementById('select_bbb');
oSelect.appendChild(oGroup);

}

</script>

<select name='select_aaa' id='select_aaa' onchange='aaa()'>
</select>

<select name='select_bbb' id='select_bbb'>
</select>

上記にて、
select_aaaをonchangeする事によって、
select_bbbが動的に変わるセレクトボックスwith optgroupを作成できましたが、

select_aaaをonchangeする度に、select_bbbにoptionが追加されてしまいます。

一度removeして追加したいのですが、
oSelect.removeChild(oGroup);

を実行するとエラーになります。

なぜでしょうか？？ここを教えてください。

宜しくお願いします。