プルダウンメニューに連動するチェックボックス(2)

質問

こんにちわ。

先日下記の質問をさせていただき、yambejp様よりお答えを頂いきました。
直ぐに旨く行き大変助かりました。

http://okwave.jp/qa/q8844785.html

ただ、もう一つ可能でしたら最初にある全選択可能な食べ物をなくして、
いきなり制限付きの生き物から始められるようにすることは出来るのでしょうか？
食べ物のような大枠を無くして、生き物、果物、穀物のような小枠のみで構成できたらと考えております。

可能でしたらどなたかご教授頂けると助かります。
何卒よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

食べ物をはずして、ロード時にchangeFuncを実行してみては？

<script>
window.onload=function(){
changeFunc(document.getElementById("genre"));
}
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
var food={
"grain":["rice","soba"]
,"fruit":["apple","orange"]
,"meat":["pork","fish"]
,"hot":["rice","soba","pork","fish"]
,"cold":["apple","orange"]
,"red":["apple","pork"]
};
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].checked=false;
if(v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}
if(typeof food[v] =="undefined") return false;

for(var j in food[v]){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].id==food[v][j] ) f[i].disabled=false;
}
}
}
}
</script>
<form>
<select name="genre" id="genre" onChange="changeFunc(this)">
<option value="meat">生き物</option>
<option value="fruit">果物</option>
<option value="grain">穀物</option>
<option value="hot">温かい</option>
<option value="cold">冷たい</option>
<option value="red">赤い</option>
</select><br>
<input type="checkbox" value="お米" id="rice">お米<br>
<input type="checkbox" value="りんご" id="apple">りんご<br>
<input type="checkbox" value="みかん" id="orange">みかん<br>
<input type="checkbox" value="さかな" id="fish">さかな<br>
<input type="checkbox" value="豚肉" id="pork">豚肉<br>
<input type="checkbox" value="そば" id="soba">そば<br>
</form>

お礼

yambejpさま

早速のご返答ありがとうございます！
最高です！旨くいきました。
ほんと何度も済みませんでした、おかげで助かりました！！