テキストエリアの入力不可は、Javascriptできますが、
セレクトメニューを選択不可にできません。
初期状態でなく、ある条件が他で選択された時、
選択不可にしたいのですが、何か方法ございますか?

<form name=test>
<SELECT NAME="nengou">
<option value="1">昭和</option>
<option value="2">大正</option>
<option value="3">明治</option>
</SELECT>
</form>

A 回答 (2件)

失礼。

もっとずっと簡単にできます。何を血迷っていたのか...

<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>
    • good
    • 0

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の動的な変更を行うというものです。

参考URL:http://www.doraneko.org/misc/dom1/cover.html
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qセレクトメニューを選択不可にしつつvalueの値を生かす方法

いつもこのサイトを利用させていただいています。
セレクトメニューの選択不可はdisabledを使えばできることがわかったのですが、それだとvalueの値が保持されませんよね。
選択不可なんだけど、value=""の値を持たせたいのですが、どのようにすればよいでしょうか?
ご教授よろしくお願いします。

Aベストアンサー

disabledされるであろう項目名と同じ項目名について、
HIDDENで定義します。名前は、_h を付けるとか。
初期値では、disabledで無効化して置き、

if (fOBJ["data_kit"][1].checked) {
fOBJ["pc_os"].disabled = false;
fOBJ["pc_os_h"].disabled = true;
}
else {
fOBJ["pc_os"].disabled = true;
fOBJ["pc_os_h"].disabled = false;
}

なんてコードで有効にしてしまう。
なんてアイディアではどうでしょうか?

もちろん。受け側でも、_h 付きに付いてもチェックして頂く必要があるのですけど。

# 試してないので分かりませんが、_h なしでも動く様な気もすこし。。。

Qselectを変更不可にしたい

いつもお世話になっております。
今回はselectについてお聞きしたいです。

ある条件でselectを選択不可にしようと思い、

if(...) Selectbox.disabled = true;

としておりますが、選択は不可能になりましたが灰色がかってしまいます。
できれば色は黒いままで選択不可にしたいのですがどのように
すれば実現できますでしょうか?
ご教授お願いします。

Aベストアンサー

たとえば、選べるけど、値が変えられないとかでしたらこんな感じで

<script>
function check(obj){
var s=obj.form.hoge;
if(obj.checked){
s.index=s.selectedIndex;
s.onchange=function(){this.selectedIndex=this.index;}
}else{
s.onchange=function(){return false;}
}
}

</script>
<form>
<input type="checkbox" onClick="check(this)">変更不可
<select name="hoge">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>

Qドロップダウンメニューで特定項目を選択できないようにしたい

下記のドロップダウンメニューで
「野球について」「サッカーについて」の行は見出しの役割なので
選択できないようにしたいのですが、どうしたらいいでしょうか。

<option disabled>野球について</option>

としてみましたが、ダメでした。


<html>
<body>
<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="./0.html">ルールトップ</option>
<option>野球について</option>
<option value="./1.html"> ├アウト</option>
<option value="./2.html"> ├セーフ</option>
<option value="./3.html"> ├ストライク</option>
<option value="./4.html"> └ボール</option>
<option>サッカーについて</option>
<option value="./5.html"> ├ゴール</option>
<option value="./6.html"> ├フリーキック</option>
<option value="./7.html"> ├オフサイド</option>
<option value="./8.html"> └ファール</option>
</select>
</body>
</html>

下記のドロップダウンメニューで
「野球について」「サッカーについて」の行は見出しの役割なので
選択できないようにしたいのですが、どうしたらいいでしょうか。

<option disabled>野球について</option>

としてみましたが、ダメでした。


<html>
<body>
<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="./0.html">ルールトップ</option>
<option>野球について</option>
<option value="./1.html"> ├アウト</option>
<option value="./2.html"> ...続きを読む

Aベストアンサー

optgroupってご存じないですか?
一度こちらでテストしてみてはいかがでしょうか?

<html>
<body>
<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="./0.html">ルールトップ</option>
<optgroup label="野球について">
<option value="./1.html">├アウト</option>
<option value="./2.html">├セーフ</option>
<option value="./3.html">├ストライク</option>
<option value="./4.html">└ボール</option>
</optgroup>
<optgroup label="サッカーについて">
<option value="./5.html">├ゴール</option>
<option value="./6.html">├フリーキック</option>
<option value="./7.html">├オフサイド</option>
<option value="./8.html">└ファール</option>
</optgroup></select>
</body>
</html>

optgroupってご存じないですか?
一度こちらでテストしてみてはいかがでしょうか?

<html>
<body>
<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="./0.html">ルールトップ</option>
<optgroup label="野球について">
<option value="./1.html">├アウト</option>
<option value="./2.html">├セーフ</option>
<option value="./3.html">├ストライク</option>
<option value="./4.html">└ボール</option>
</optgroup>
<optgroup label="サッカーについて">...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q