JSで 2つのプルダウンを連動させたい

Question

前提・実現したいこと

二つのプルダウンを連動させるページを作りたいと思っています。

**プルダウン1 **

やさい
くだもの

**プルダウン2 **

キャベツ
レタス
りんご
みかん

デフォルト状態だとプルダウン2は全て表示、プルダウン1を選択すると絞り込まれる処理をしたいです。

onchange時に配列を作るような処理になるかと思いますが、具体的にどのようなFunctionになるでしょうか？

データ自体はコントローラから持ってきています。onchange時にsubmitすれば簡単に実現できるのですが、そうではなくJS側だけで完結したいと思っております。

宜しくお願いいたします。

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

<select name="category">
<option value="やさい">やさい</option>
<option value="くだもの">くだもの</option>
</select>
<select name="detail"></select>

var item = {
  'やさい':['キャベツ','レタス'],
  'くだもの':['りんご','みかん']
}
var setDetail = function(category){
  $('[name=detail]').empty();
  $.map(item[category], function(val){
    $('[name=detail]').append($('<option>', { value: val, text: val }))
  });
}
// 初期化
setDetail('やさい');

$('[name=category]').change(function() {
    var category = $('[name=category]').val();
  setDetail(category);
});

Answer 2

プルダウン１を変化させるごとにajaxでプルダウン2を
持ってくるとデータ保持の無駄が省けます
もちろん少量な場合はすべてをhtmlで保持してもいいですが

Answer 3

プルダウン2のoption要素にやさい・くだものに対応するclassを設定し、onChange でいったん全ての option を display: none; にしてから絞り込み対象のclassのみ display: block; で再表示する、が楽かと思います。