javascript - 确保在填充相同类别的两个 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/

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