ラジオボタンとプルダウンを連動させたい

解決済

質問者：yako_k
質問日時：2010/07/23 15:55
回答数：6件

ラジオボタンとプルダウンを連動させたい

いつもお世話になっております。
ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、
数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。

http://oshiete.goo.ne.jp/qa/2928590.htmlのANo.2の回答
--------------------------------------------------------------------
<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].className==v || v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}
}
</script>

<form>
<select name="genre" onChange="changeFunc(this)">
<option value="">食べ物</option>
<option value="grain">穀物</option>
<option value="fruit">果物</option>
<option value="meat">生き物</option>
</select>
<br />
<input type="checkbox" value="お米" class="grain">お米<br />
<input type="checkbox" value="そば" class="grain">そば<br />
<input type="checkbox" value="りんご" class="fruit">りんご<br />
<input type="checkbox" value="みかん" class="fruit">みかん<br />
<input type="checkbox" value="さかな" class="meat">さかな<br />
<input type="checkbox" value="豚肉" class="meat">豚肉
</form>
--------------------------------------------------------------------
を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、
まったく逆でどうしたら良いのかまったくわかりませんでした。
他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。

希望の仕様は
・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。
・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語）
以上です。

javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： zeff#1
回答日時：2010/07/28 11:34

もし、これで合っていたらお慰み。

違うなら誰か正解を書いてください；

<script type="text/javascript">

</script>
</head>
<body>
<form name="form1" id="form1" action="#">
<p>


<input type="radio" name="r1" value="穀物" id="grain">
<label for="grain">穀物</label>

<input type="radio" name="r1" value="果物" id="fruit">
<label for="fruit">果物</label>

<input type="radio" name="r1" value="生き物" id="meat">
<label for="meat">生き物</label>
</p>



<p>
<input type="radio" name="tuika" value="テスト1" id="test1">
<label for="test1">テスト1</label>

<input type="radio" name="tuika" value="テスト2" id="test2">
<label for="test2">テスト2</label>

<input type="radio" name="tuika" value="テスト3" id="test3">
<label for="test3">テスト3</label>
</p>



<p>
<select name="genre">
<option value="食べ物" class="food" selected>食べ物</option>
<option value="お米" class="grain food">お米</option>
<option value="そば" class="grain food">そば</option>
<option value="りんご" class="fruit food">りんご</option>
<option value="みかん" class="fruit food">みかん</option>
<option value="さかな" class="meat food">さかな</option>
<option value="豚肉" class="meat food">豚肉</option>
</select>
</p>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなり、申し訳ありませんでした。
無事に動作しました。
何度も回答をいただき、貴重な知識とお時間を本当にありがとうございました！

通報する

お礼日時：2010/08/07 16:33

No.5

回答者： zeff#1
回答日時：2010/07/27 20:06

#2,4ですが、

どうもこのやり方は違うような気がしてきましたので、
他の回答を待ったほうが賢明です。

- 0
- 件

通報する

No.4

回答者： zeff#1
回答日時：2010/07/27 10:18

#2です。

それでしたら、
var elm = obj.elements["r1"];
に変えるか、もっと短く、
var obj = document.getElementById("form1");
var elm = obj.elements["r1"];
↓
var elm = document.getElementById("form1").elements["r1"];
にしてください。

プルダウンを操作するラヂオボタンのnameをr1のところに入れます。

そこを間違ってたのに後で気づいたんですが、
訂正するのを手抜きしました、すいません＾＾；

あともう1個、
var s = this.form.elements["genre"], opt = s.options;
↓
var opt = this.form.elements["genre"].options;

sはどこにも使って無いので意味なしでした。

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2010/07/23 18:23

オプションをdisableにするだけじゃなく、非表示にしたいなら

<option value="none" selected>選択して下さい</option>

も追加しといた上で、changeFunc()の中で、
f.genre.options[0].selected=true;
と、
options[i].style.display=(options[i].className.match(class))?"block":"none";
も追加すればよいかな。（<option>ってblock要素だったっけ？）

後、一個一個にonChange="changeFunc(this)を付けるのが面倒なら、
イベントリスナーの追加処理ですね（省略）。

それにしても、最近のブラウザーは「W3C Selectors API Level 1」
てのを実装してるので、
　document.querySelectorAll("セレクター");
を使ってもっと簡単にかけるぞ。
http://www.w3.org/TR/selectors-api/

（参考）Selectors APIの実装状況（2009年9月時点の物）
　IE8以上、Firefox3.5以上、safari4.0以上、opera10以上、Google chrome
ならほぼ大丈夫。

http://journal.mycom.co.jp/photo/articles/2009/0 …

- 0
- 件

通報する

この回答へのお礼

ご回答いただき、ありがとうございました。
非表示したいなと思い、じっくりと10回ほど読ませて頂いたのですが、
私にはまったく理解できませんでした……。
もう少し勉強して、理解できるようになったら非表示もチャレンジしたい
と思います。
このたびはありがとうございました！

通報する

お礼日時：2010/07/27 00:40

No.2

回答者： zeff#1
回答日時：2010/07/23 17:54

radioボタン選択でselectで選べる項目を限定すればいいんですよね？

こうじゃないのかなぁ。
「食べ物」はすべてに共通しているのでdisabledしないようにするとか。

<script type="text/javascript">

</script>
</head>
<body>
<form name="form1" id="form1" action="#">
<p>
<input type="radio" name="r1" value="すべて" id="food" checked>
<label for="food">すべて</label>

<input type="radio" name="r1" value="穀物" id="grain">
<label for="grain">穀物</label>

<input type="radio" name="r1" value="果物" id="fruit">
<label for="fruit">果物</label>

<input type="radio" name="r1" value="生き物" id="meat">
<label for="meat">生き物</label>
</p>

<p>
<select name="genre">
<option value="食べ物" class="food" selected>食べ物</option>
<option value="お米" class="grain food">お米</option>
<option value="そば" class="grain food">そば</option>
<option value="りんご" class="fruit food">りんご</option>
<option value="みかん" class="fruit food">みかん</option>
<option value="さかな" class="meat food">さかな</option>
<option value="豚肉" class="meat food">豚肉</option>
</select>
</p>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
すごい！　ちゃんと選択できなくなりました。ありがとうございます！

それで、もしこちらをご覧になっていたらもうひとつご教示いただけないでしょうか。

いただいたサンプルのラジオボタンの選択肢とプルダウンの間に、もうひとつラジオボタンを入れました。
今回の動作には関係のないものなのですが、そちらにチェックを入れると、プルダウンの非選択が部分的におかしくなってしまいます（プルダウンのすべてが非選択になります）。
------------------------------------------------
<form name="form1" id="form1" action="#">
<p>


<input type="radio" name="r1" value="穀物" id="grain">
<label for="grain">穀物</label>

<input type="radio" name="r1" value="果物" id="fruit">
<label for="fruit">果物</label>

<input type="radio" name="r1" value="生き物" id="meat">
<label for="meat">生き物</label>
</p>



<p>
<input type="radio" name="tuika" value="テスト1" id="test1">
<label for="test1">テスト1</label>

<input type="radio" name="tuika" value="テスト2" id="test2">
<label for="test2">テスト2</label>

<input type="radio" name="tuika" value="テスト3" id="test3">
<label for="test3">テスト3</label>
</p>



<p>
<select name="genre">
<option value="食べ物" class="food" selected>食べ物</option>
<option value="お米" class="grain food">お米</option>
<option value="そば" class="grain food">そば</option>
<option value="りんご" class="fruit food">りんご</option>
<option value="みかん" class="fruit food">みかん</option>
<option value="さかな" class="meat food">さかな</option>
<option value="豚肉" class="meat food">豚肉</option>
</select>
</p>
</form>
------------------------------------------------
解決方法がありましたら、教えていただけましたら助かります。
よろしくお願いします。

通報する

お礼日時：2010/07/27 00:51

No.1

回答者： yyr446
回答日時：2010/07/23 17:29

とり急ぎ、似たようなロジックで、

2つ以上チェックされた時どうされたいか書いてないので、
一つしかチェックできないようにしてあります。
（2つ以上チェックの改造は簡単、前半をコメントアウトするだけ）
※全角空白は半角空白にしてね

<script type="text/javascript">
function changeFunc(obj){
　var f=obj.form;
//ここから一つしかチェックできないようにする処理
　var chkboxs=f.getElementsByTagName("input");
　for(var i=0;i<chkboxs.length;i++){
　 if(chkboxs[i].getAttribute("type")=="checkbox" && chkboxs[i]!=obj)
　　 chkboxs[i].checked=false;
　}
//ここから、チェックされたクラスのオプションを不可にする処理
　var class=(obj.checked)?obj.value:"";
　var options=f.getElementsByTagName("option");
　for(var i=0;i<options.length;i++){
　 options[i].disabled=true;
　 options[i].disabled=(options[i].className.match(class))?false:true;
　}
}
</script>

<form>
<input type="checkbox" value="food" onChange="changeFunc(this)">食べ物</option><br>
<input type="checkbox" value="grain" onChange="changeFunc(this)">穀物</option><br>
<input type="checkbox" value="fruit" onChange="changeFunc(this)">果物</option><br>
<input type="checkbox" value="meat" onChange="changeFunc(this)">生き物</option><br>
<select name="genre">
<option value="お米" class="grain food">お米
<option value="そば" class="grain food">そば
<option value="りんご" class="fruit food">りんご
<option value="みかん" class="fruit food">みかん
<option value="さかな" class="meat food">さかな
<option value="豚肉" class="meat food">豚肉
</select>
</form>
</body>