- 締切済み
セレクトメニューで選択不可にする方法ありますか？
テキストエリアの入力不可は、Javascriptできますが、 セレクトメニューを選択不可にできません。 初期状態でなく、ある条件が他で選択された時、 選択不可にしたいのですが、何か方法ございますか？ <form name=test> <SELECT NAME="nengou"> <option value="1">昭和</option> <option value="2">大正</option> <option value="3">明治</option> </SELECT> </form>
- matchori
- お礼率31% (149/469)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- zzzzzz
- ベストアンサー率61% (70/113)
失礼。もっとずっと簡単にできます。何を血迷っていたのか．．． <html> <head> <script> sel = 0; function force() { if (sel != 0) { document.form1.select1.value=sel; } } </script> </head> <body> <form name="form1"> <select name="select1" onChange="force()"> <option value="1">選択肢1</option> <option value="2">選択肢2</option> <option value="3">選択肢3</option> </select> <br> <input type="button" onclick="sel=document.form1.select1.value" value="選択肢を固定"> <input type="button" onclick="sel=0" value="元に戻す"> </form> </body> </html>
- zzzzzz
- ベストアンサー率61% (70/113)
DOM1を利用してよいのなら可能です。(DOM1はIE5以上、Netscape6以上でサポートされています) サンプルを書いておきます。 <html> <head> <script> selStore = null; function fixSelection(selNode, node, i) { if (selStore == null) { selNode = document.getElementById("select1"); // cloneNode(true)を使用するとattributeが初期状態でしか複製されない // 条件に合う(選択されている)ノードのみ自分で複製 selStore = selNode.cloneNode(false); for (i=0; i<selNode.childNodes.length; i++) { node = selNode.childNodes[i]; if ((node.nodeType == 1) && (node.nodeName.toUpperCase() == "OPTION")) { // ELEMENT_NODE == 1 if (node.getAttribute("selected")) { selStore.appendChild(node.cloneNode(true)); } } } selStore = selNode.parentNode.replaceChild(selStore, selNode); } } function restoreSelection(selNode) { if (selStore != null) { selNode = document.getElementById("select1"); selNode.parentNode.replaceChild(selStore, selNode); selStore = null; } } </script> </head> <body> <form> <select id="select1"> <option value="1">選択肢1</option> <option value="2">選択肢2</option> <option value="3">選択肢3</option> </select> <br> <input type="button" onclick="fixSelection()" value="選択肢を固定"> <input type="button" onclick="restoreSelection()" value="元に戻す"> </form> </body> </html> fixSelection()では、 SELECT以下の構造から選択されているOPTIONのみをコピーしたSELECTエレメントを作成し、 既存のHTML中のSELECTエレメントと置き換えています。 元のSELECTエレメントの退避先がselStoreです。 restoreSelection()では逆に、selStoreに退避しておいたSELECTエレメントを元の位置に挿入しています。 DOM1については、ここではとても解説しきれないので、以下のページを参考にしてください。 基本的な考え方は、HTML文書を木構造としてとらえ、木のノードに対する操作としてHTMLの動的な変更を行うというものです。
