确保在两个填充相同类别的css3选择框中进行唯一选择

Question

有两个填充了相同类别的选择框来进行过滤。好吧，提供两种选择来扩大结果。

   $("#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();
    }
  }); 

现在，此脚本确保用户只能从两个选择框中选择一种类别。

问题：
第一次 - 当页面加载时，默认情况下选择的选项，唯一性仅在用户进行选择时发生。也就是说，此选择框将填充接缝类别。所以html选择默认在两个框中显示第一个选项。但是当你真正做出选择时，只有这个脚本才有效。

秒 - 如果你有一个漂亮的css3下拉选择框。该剧本根本不起作用。

链接到裸骨版本 - http://jsfiddle.net/fh9Qp/ - 正如概念验证

链接到我实际尝试的内容 - http://jsfiddle.net/G6hXr/

实际问题在哪里。以及如何解决这个问题。