選択すると別の項目も選択できるようにするには？？？

【至急お願いします！】

先日、このソースを教えていただきました。

<input type="radio" name="r" onclick="f(0)" checked>野菜
<input type="radio" name="r" onclick="f(1)">果物
<input type="radio" name="r" onclick="f(2)">肉
<br>
<select id="s1">
<option>キャベツ</option>
<option>じゃがいも</option>
<option>ナス</option>
</select>
<select id="s2">
<option>２日間</option>
<option>３日間</option>
<option>４日間</option>
</select>

<script>
var a = [["キャベツ","じゃがいも","ナス"],["りんご","もも","みかん"],["牛肉","豚肉","鶏肉"]];
var s1 = document.getElementById("s1");
function f(num){
s1.length = a[num].length;
s1.selectedIndex = 0;
for(i=0;i<a[num].length;i++){
s1.options[i].text = a[num][i];
}
}
</script>



説明がうまくできるかわかりませんが、
野菜を選択した場合、キャベツ、ジャガイモ、なすが選べますが、更にキャベツ、ジャガイモ、ナスの賞味期限を「２日間」「３日間」「４日間」と選択できるようにしたいのですが…。
また、果物も同様にやりたかったのですが、全然そのレベルに達していませんので、かなりハードルが高くで手の着けようがありませんでした。
もし、このようなことができればうれしい限りです。

どうぞご教授くださいませ。

No.1 回答者： fujillin 回答日時： 2015/05/18 13:09

セレクトボックスの連動ですよね？

汎用化したものを創っている方がいらっしゃいますので、そういったものを利用した方がてっとり速いのではないでしょうか？
（他にもあると思いますが、とりあえず知っているものを…）
　http://d.hatena.ne.jp/Mars/20071109