[新着] Webテンプレートを仮オープンしました
その内容とは、option要素の内容とか value属性値とか、そのあたりで良いでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<noscript id="doraemon">
<p>JavaScript非対応・あるいは無視する環境では、代わりにこのテキストが表示されまふ</p>
</noscript>
<script type="text/javascript">
var ms_optionList = new Array(
"選択してください",
"HTML",
"CSS",
"JavaScript"
)
var pk_box = document.getElementById('doraemon');
//----------
var pk_p = document.createElement('p');
var pk_text = document.createTextNode('');
pk_p.appendChild(pk_text);
var ms_p = document.createElement('p');
var ms_select = document.createElement('select');
var ms_opVal = new Array(ms_optionList.length);
var ms_options = new Array(ms_optionList.length);
for (var i=0; i < ms_optionList.length; i++){
ms_opVal[i] = document.createTextNode(ms_optionList[i]);
ms_options[i] = document.createElement('option');
ms_options[i].appendChild(ms_opVal[i]);
ms_select.appendChild(ms_options[i]);
}
ms_select.onchange = function(){
pickUp(this);
}
ms_p.appendChild(ms_select);
pk_box.parentNode.insertBefore(ms_p, pk_box.nextSibling);
pk_box.parentNode.insertBefore(pk_p, pk_box.nextSibling);
function pickUp(obj){
var pk_newText = document.createTextNode(obj.options[obj.selectedIndex].firstChild.nodeValue);
pk_p.replaceChild(pk_newText, pk_p.firstChild);
}
</script>
</body>
</html><ul xmlns="http://www.w3.org/1999/xhtml"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
<div xmlns="http://www.w3.org/1999/xhtml">
<p></p>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</div><script type="application/javascript; version=1.6"><![CDATA[
if (document.implementation &&
document.implementation.hasFeature ('Core' , '3.0') &&
document.implementation.hasFeature ('+HTML' , '2.0') &&
document.implementation.hasFeature ('+Range', '2.0') &&
document.implementation.hasFeature ('+BasicEvents', '3.0')
) {
var ns = 'http://www.w3.org/1999/xhtml';
var input = document.getElementsByTagNameNS (ns, 'ul')[0];
var doc = input.ownerDocument;
var output = input.parentNode.insertBefore (doc.createElementNS (ns, 'p'), input);
doc.renameNode (input, ns, 'select');
Array.forEach (input.childNodes, function (node) { doc.renameNode (node, ns, 'option'); } );
// not standard ECMA-262
var range = (doc.createRange || doc.getFeature ('Range', '2.0').createRange) ();
range.setStartBefore (output);
range.setEndAfter (input);
range.surroundContents (doc.createElementNS (ns, 'div'));
(input.addEventListener || input.getFeature ('Events', null).addEventListener)('change', {
outputText : output.appendChild (doc.createTextNode ('ABC')),
handleEvent : function (event) {
var node = event.currentTarget;
if (! node.isSupported ('HTML', '2.0')) node = node.getFeature ('HTML', '2.0');
this.outputText.data = node.options[ node.selectedIndex ].text;
}
}, false);
}
]]></script>Array.forEach (input.childNodes, function (node) { if (node.localName == 'li') doc.renameNode (node, ns, 'option'); } );