jQuery Doubleselect Plugin

１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。
次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。



１個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。



１個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。



いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できます。
サンプルコード例は以下。

$(document).ready(function()
{
  var selectoptions = {
    "Vegetables": {
      "key" : 10,
      "defaultvalue" : 111,
      "values" : {
        "tomato": 110,
        "potato": 111,
        "asparagus": 112
      }
    },
    "Fruits": {
      "key" : 20,
      "defaultvalue" : 212,
      "values" : {
        "apple": 210,
        "orange": 211,
        "kiwi": 212,
        "melon": 213
      }
    }
  };
  $('#first').doubleSelect('second', selectoptions);
});
<div>
<select id="first" name="first" size="1"><option value="">--</option></select><br>
<select id="second" name="second" size="1"><option value="">--</option></select>
</div>

JSON形式の変数を渡す感じになるため、ajaxでパラメータを受け取るようにすればコードの分離も出来て綺麗に書けそうですね。