[新着] Webテンプレートを仮オープンしました
// これを追加
function searchClick() {
document.FORM2.word1.disabled = true;
document.FORM2.submit();
}<INPUT type="submit" value=" 検 索 ">
<select name="word2">
<optgroup label="行政">
<option value="50_01">官公庁</option>
<option value="50_02">公共機関</option>
</optgroup>
<optgroup label="テーマパーク">
<option value="51_01">テーマパーク</option>
<option value="51_02">遊園地</option>
</optgroup>
<optgroup label="芸術・文化">
<option value="51_01">歴史建造物</option>
<option value="51_02">歴史街道</option>
</optgroup>
</select><select name="word1"> → <select id="word1">
window.onload = function () {
var node = document.getElementById ('word1');
for (var i = 0, I = data.length; i < data.I; i++) {
node.options[i] = new Option (data[i][0], data[i][0]); // not DOM-standard
}
setSubMenu (0);
};for (var i = 0, I = data.length; i < I; i++) {<!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>