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'); 
     } 
    }); 
});​ 

これは、私は次のように何が必要だろうと仮定します示す任意のHTMLがなければ、私のテーブル構造

<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

です。

最初closest()を使用して<tr>まで横断してからのみ関連HTML構造を示してください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'); 
     } 
    }); 
});​