Javascript 确保两个css3选择框中填写相同类别的唯一选择

得到两个填充了相同类别的选择框以进行筛选。那么，提供两种选择来扩大结果

   $("#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 select默认情况下在两个框中显示第一个选项。但当你真正做出选择时，只有这个脚本才起作用

第二，如果你有一个漂亮的css3下拉选择框。剧本根本不起作用

链接到裸体版本--作为概念证明

链接到我实际尝试的内容-

---

实际问题在哪里。您的第一个问题出现了，因为您只处理c_id1和c_id2的更改事件；您不需要初始化任何内容。因此，在用户更改某些内容之前，不会发生任何事情。即使我初始化选择框，两者中的类别也不是唯一的。只有当用户做出选择时，脚本才会工作。好的，我们会显示初始化的代码，因为那里出了问题：我只是在框中放入了一个选中的-