Javascript 如果已经使用了两个选择框组合，如何使用jQuery进行验证

我有一组两个选择框，我可以通过按“添加更多”按钮来克隆它们。问题是，这种组合不能再使用了。因此，如果我在第一页选择

“Book”

，在第二页选择

“Classic”

，我就不能再选择它了

请在此处查看演示：

HTML:

    <div class="box">
            <select name="area_id[1]" id="area_id_1" class="area">
                <option value="0" disabled selected>Select an area...</option>
                <option value="1" >Literature</option>
                <option value="2" >Music</option>
                <option value="3" >Cinema</option>
            </select>
            <select name="genre_id[1]" id="genre_id_1" class="genre">
                <option value="0" disabled selected>Select a genre...</option>
                <option value="1" >Classic</option>
                <option value="2" >2000+</option>
                <option value="3" >Portuguese</option>
            </select>
            <hr>
    </div>
<span class="add">Click to Add More</span>

var attrs = ['id'];
function resetAttributeNames(section, action) { 
  var index = section.prevAll('.box').length;
  var tags = section.find('select'), idx = index + 1;
  tags.each(function() {
    var $this = $(this);
    if(action === 'add'){
      $this.find('option[value="0"]').attr('disabled', true); 
      $this.find('option[value="0"]').attr('selected', true); 
    } 
    $.each(attrs, function(i, attr) {
      var attr_val = $this.attr(attr);
      var name = $this.attr('name');
      if (attr_val) {
        $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx)));
        $this.attr('name', name.replace(/\[(.*?)\]/, '['+idx+']'));
      }                    
     });
   });
}

$('.add').click(function(e){
  e.preventDefault();
  var lastRepeatingGroup = $('.box').last();
  var cloned = lastRepeatingGroup.clone(true);
  cloned.insertAfter(lastRepeatingGroup);
  resetAttributeNames(cloned, 'add');           
});

$('.box').change(function() {
            var this_id = $(this).attr('id');
            var this_pos = getNumber($(this).attr('name'));
            $('.area').each(function(){
                var other_select_pos = getNumero($(this).attr('name'));
                if($('#area_id_'+other_select_pos).val() === $('#'+this_id).val()){
                    var unselectable = $('#genre_id_'+other_select_pos).val();
                    $('#genre_id_'+this_pos+' option').each(function() {
                        if($(this).val() === unselectable){
                            $(this).attr('disabled', true);
                        }
                    });
                }
            })
        })

        function getNumber(name){
            var regExp = /\[([^)]+)\]/;
            var matches = regExp.exec(name);
            return matches[1];
        }

我的尝试：

    <div class="box">
            <select name="area_id[1]" id="area_id_1" class="area">
                <option value="0" disabled selected>Select an area...</option>
                <option value="1" >Literature</option>
                <option value="2" >Music</option>
                <option value="3" >Cinema</option>
            </select>
            <select name="genre_id[1]" id="genre_id_1" class="genre">
                <option value="0" disabled selected>Select a genre...</option>
                <option value="1" >Classic</option>
                <option value="2" >2000+</option>
                <option value="3" >Portuguese</option>
            </select>
            <hr>
    </div>
<span class="add">Click to Add More</span>

var attrs = ['id'];
function resetAttributeNames(section, action) { 
  var index = section.prevAll('.box').length;
  var tags = section.find('select'), idx = index + 1;
  tags.each(function() {
    var $this = $(this);
    if(action === 'add'){
      $this.find('option[value="0"]').attr('disabled', true); 
      $this.find('option[value="0"]').attr('selected', true); 
    } 
    $.each(attrs, function(i, attr) {
      var attr_val = $this.attr(attr);
      var name = $this.attr('name');
      if (attr_val) {
        $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx)));
        $this.attr('name', name.replace(/\[(.*?)\]/, '['+idx+']'));
      }                    
     });
   });
}

$('.add').click(function(e){
  e.preventDefault();
  var lastRepeatingGroup = $('.box').last();
  var cloned = lastRepeatingGroup.clone(true);
  cloned.insertAfter(lastRepeatingGroup);
  resetAttributeNames(cloned, 'add');           
});

$('.box').change(function() {
            var this_id = $(this).attr('id');
            var this_pos = getNumber($(this).attr('name'));
            $('.area').each(function(){
                var other_select_pos = getNumero($(this).attr('name'));
                if($('#area_id_'+other_select_pos).val() === $('#'+this_id).val()){
                    var unselectable = $('#genre_id_'+other_select_pos).val();
                    $('#genre_id_'+this_pos+' option').each(function() {
                        if($(this).val() === unselectable){
                            $(this).attr('disabled', true);
                        }
                    });
                }
            })
        })

        function getNumber(name){
            var regExp = /\[([^)]+)\]/;
            var matches = regExp.exec(name);
            return matches[1];
        }

但这段代码看起来是错误的，它不能正常工作。我怎样才能做到既简单又干净

---

提前感谢

您想为

选择

绑定

onchange

事件，并查看该区域类型对是否多次显示

.box

es

  $this.change(function () {
      var area = $this.parents(".box").find(".area").val();
      var genre = $this.parents(".box").find(".genre").val();
      var numFound = 0;
      $(".box").each(function () {
          var cur_area = $(".area", this).val();
          var cur_box = $(".genre", this).val();
          if (area === cur_area && cur_box === genre) {
              numFound += 1;
          }

      });

      if (numFound > 1) {
          alert("You already choose that " + (numFound - 1) + " times!");
      }
  });

---

你可以看到更新的小提琴

你所说的

是什么意思？我不能再选择它了

？它在小提琴中的效果和预期的一样。我不希望能够多次选择相同的组合。现在，这是可能的。