javascript - 同じカテゴリで満たされた2つのcss3選択ボックスで一意の選択を確保する

Question

フィルターを実行するために、同じカテゴリが入力された 2 つの選択ボックスを取得しました。結果を広げるための 2 つの選択肢を提供します。

   $("#c_id1").change(function(){
    $("#c_id2 option:hidden").show();
    if($(this).val().length ){
      $("#c_id2 option[value=" + $(this).val() + "]").hide();
    }
  });
  $("#c_id2").change(function(){
    $("#c_id1 option:hidden").show();
    if($(this).val().length ){
      $("#c_id1 option[value=" + $(this).val() + "]").hide();
    }
  }); 

現在、このスクリプトは、ユーザーが 2 つの選択ボックスのいずれかから 1 つのタイプのカテゴリのみを選択できるようにします。

問題:
最初に - ページが読み込まれると、デフォルトで選択されているオプションがあり、ユーザーが選択したときにのみ一意性が発生します。つまり、この選択ボックスにはシーム カテゴリが表示されます。そのため、html select はデフォルトで両方のボックスに最初のオプションを表示します。しかし、実際に選択を行った場合にのみ、このスクリプトが機能します。

2 番目- かわいい css3 ドロップダウン選択ボックスがある場合。スクリプトはまったく機能しません。

ベアボーンバージョンへのリンク - http://jsfiddle.net/fh9Qp/ - 概念の証明として

私が実際に試みているものへのリンク - http://jsfiddle.net/G6hXr/

実際の問題はどこにありますか。そして、これを整理する方法。