>>11
Typo 訂正：for (var i = 0, I = data.length; i < I; i++) {
スレッドは >>10 で終了していると思うので、以下はあくまで蛇足。
> 私なら、>>0 のようなスクリプト完全依存の方法は採らず、上記の optgroup 要素を活かす形を考えます
偉そうなことを言ってしまったので、例を出してみる。以下は、optgourp 要素でグループ化された select 要素を、>>0 のような 2 段連動に変換します。また、非スクリプト環境でも、問題なく送信できます。
面倒なので Firefox と Opera（JavaScript 1.6 + DOM Level 2）のみ。IE 対応のものは、似たようなものをここに何度か書いたので必要なら探して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
[disabled] { display: none; }
</style>
<script type="application/javascript">
addEventListener ('load', function (event) {
var select = document.forms[0].elements['word2'];
var newSelect = document.createElement ('select');
Array.forEach (select.getElementsByTagName ('optgroup'), function (optgroup) {
var option;
option = optgroup.insertBefore (document.createElement ('option'), optgroup.firstChild);
option.appendChild (document.createTextNode ('-'));
option = newSelect.appendChild (option.cloneNode (false));
option.appendChild (document.createTextNode (optgroup.label));
option.value = optgroup.label;
} );
newSelect.addEventListener ('change', {
relatedSelect : select,
handleEvent : function (event) {
var label = event.target.value;
Array.forEach (this.relatedSelect.getElementsByTagName ('optgroup'), function (optgroup) {
if (optgroup.label == label) {
optgroup.disabled = false;
this.relatedSelect.selectedIndex = optgroup.getElementsByTagName ('option')[0].index;
} else {
optgroup.disabled = true;
}
}, this);
rs = label = null;
}
}, false);
select.parentNode.insertBefore (newSelect, select);
newSelect.selectedIndex = 0;
var event = document.createEvent ('HTMLEvents');
event.initEvent ('change', true, false);
newSelect.dispatchEvent (event);
select = newSelect = event = null;
}, false);
</script>
<form action="#">
<p>
<select name="word2">
<optgroup label="行政">
<option value="50_01">官公庁</option>
<option value="50_02">公共機関</option>
<option value="50_03">公共施設</option>
<option value="50_04">文化施設</option>
<option value="50_99">その他</option>
</optgroup>
<optgroup label="テーマパーク">
<option value="51_01">テーマパーク</option>
<option value="51_02">遊園地</option>
<option value="51_03">動物園</option>
<option value="51_04">水族館</option>
<option value="51_05">植物園</option>
<option value="51_99">その他</option>
</optgroup>
<optgroup label="芸術・文化">
<option value="52_01">歴史建造物</option>
<option value="52_02">歴史街道</option>
<option value="52_03">城・城跡</option>
<option value="52_04">遺跡</option>
<option value="52_05">庭園</option>
<option value="52_06">寺・神社・教会</option>
<option value="52_99">その他</option>
</optgroup>
</select>
<input type="submit" value="SUBMIT">
</p>
</form>
