防止使用Javascript對每一行進行多重選擇

Question

我對JavaScript很陌生。我想避免每個「行」的多個選擇。我找到一個示例here，但它刪除頁面中所有選擇的屬性。我試圖調整它只支持錶行，但沒有這樣的運氣。有人可以請幫忙！以下是代碼片段。

$('select').change(function() { 
    var ary = new Array(); 
    $('select option:selected').each(function() { 
     if ($(this).val().length > 0) { 
      ary.push($(this).val()); 
     } 
    }); 
    $('select option').each(function() { 
     if ($.inArray($(this).val(), ary) > -1) { 
      $(this).attr('disabled', 'disabled'); 
     } else { 
      $(this).removeAttr('disabled'); 
     } 
    }); 
});​ 

這是我的表結構

<tr> 
    <td class="col-md-6"> 
     <select name="from[]" class="form-control single-select" id="from"> 
      <?php foreach($arrStops as $a){?> 
       <option value="<?php echo implode($a) ?>"> <?php echo implode($a) ?></option> 
     <?php } ?> 
     </select> 
    </td> 
    <td class="col-md-6"> 
     <select name="to[]" class="form-control single-select" id="to"> 
      <?php foreach($arrStops as $a){ ?> 
      <option value="<?php echo implode($a) ?>"> <?php echo implode($a) ?></option> 
      <?php } ?> 
     </select> 
    </td> 

Answer 1

沒有顯示我將承擔以下會做你所需要的任何HTML。

你想用closest()使用find()

$('select').change(function() { 
    // isolate row instance 
    var $row = $(this).closest('tr'); 

    var ary = new Array(); 
    // only look inside row 
    $row.find('select option:selected').each(function() { 
     if ($(this).val().length > 0) { 
      ary.push($(this).val()); 
     } 
    }); 
    $row.find('select option').not(':selected').each(function() { 
     if ($.inArray($(this).val(), ary) > -1) { 
      $(this).attr('disabled', 'disabled'); 
     } else { 
      $(this).removeAttr('disabled'); 
     } 
    }); 
});​