从列表中删除“添加”值

Question

所以我有 6 行多列表字段。当用户选择一个值并单击 'Add' 时，该值将移至 'Add' 列表，并从 'Remove' 列表中删除。

但是，鉴于所有行都具有相同的值，如果用户从第 1 行 'Add' 框中选择一个值，我希望将其从第 2、3、4、5、6 行中删除 [=还有 24=] 个盒子。

这很难解释，所以，开始吧：

 <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript">  
  $().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });
   </script> 
 
 <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript"> 
  
    $().ready(function() {  
   $('#add2').click(function() {  
    return !$('#select3 option:selected').remove().appendTo('#select4');  
   });  
   $('#remove2').click(function() {  
    return !$('#select4 option:selected').remove().appendTo('#select3');  
   });  
  }); 
  </script>
  
  
  
  
  

   <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript"> 
  
    $().ready(function() {  
   $('#add3').click(function() {  
    return !$('#select5 option:selected').remove().appendTo('#select6');  
   });  
   $('#remove3').click(function() {  
    return !$('#select6 option:selected').remove().appendTo('#select5');  
   });  
  }); 
  </script>
  
  
<script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript"> 
  
    $().ready(function() {  
   $('#add4').click(function() {  
    return !$('#select7 option:selected').remove().appendTo('#select8');  
   });  
   $('#remove3').click(function() {  
    return !$('#select8 option:selected').remove().appendTo('#select7');  
   });  
  }); 
  </script>
  
  
  
   <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript"> 
  
    $().ready(function() {  
   $('#add5').click(function() {  
    return !$('#select9 option:selected').remove().appendTo('#select10');  
   });  
   $('#remove5').click(function() {  
    return !$('#select9 option:selected').remove().appendTo('#select10');  
   });  
  }); 
  </script>
  
     <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript"> 
  
    $().ready(function() {  
   $('#add6').click(function() {  
    return !$('#select11 option:selected').remove().appendTo('#select12');  
   });  
   $('#remove6').click(function() {  
    return !$('#select12 option:selected').remove().appendTo('#select11');  
   });  
  }); 
  </script>

  <div align="center"><strong><span class="calloutForm">OVERTIME CONTACT <br />
    DISPOSITION<br />
    <br />
  </span></strong></div>
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>N/A - No Answer</strong></td>
          <td width="139"><div align="right">
            <select name="select1" multiple class="calloutForm" id="select1" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
              </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select2" multiple class="calloutForm" id="select2">
  </select>
          </div></td>
        </tr>
        <tr>
          <td><div align="right"><a href="#" id="add">add &gt;&gt;</a></div></td>
          <td><div align="left"><a href="#" id="remove">&lt;&lt; remove</a></div></td>
        </tr>
      </table>
    </div>
    <br />
  </div>
  <div></div>  
  
  
  
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>W - Working</strong></td>
          <td width="139"><div align="right">
            <select name="select3" multiple="multiple" class="calloutForm" id="select3" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
            </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select3" multiple="multiple" class="calloutForm" id="select4">
            </select>
          </div></td>
        </tr>
        <tr>
          <td><div align="right"><a href="#" id="add2">add &gt;&gt;</a></div></td>
          <td><div align="left"><a href="#" id="remove2">&lt;&lt; remove</a></div></td>
        </tr>
      </table>
      <br />
    </div>
  </div>
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>R - Refused</strong></td>
          <td width="139"><div align="right">
            <select name="select5" multiple="multiple" class="calloutForm" id="select5" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
            </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select6" multiple="multiple" class="calloutForm" id="select6">
            </select>
          </div></td>
        </tr>
        <tr>
          <td><div align="right"><a href="#" id="add3">add &gt;&gt;</a></div></td>
          <td><div align="left"><a href="#" id="remove3">&lt;&lt; remove</a></div></td>
        </tr>
      </table>
      <br />
    </div>
  </div>
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>S - School<br />
            MTFD Approved Only
          </strong></td>
          <td width="139"><div align="right">
            <select name="select7" multiple="multiple" class="calloutForm" id="select7" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
            </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select8" multiple="multiple" class="calloutForm" id="select8">
            </select>
          </div></td>
        </tr>
        <tr>
          <td><div align="right"><a href="#" id="add4">add &gt;&gt;</a></div></td>
          <td><div align="left"><a href="#" id="remove4">&lt;&lt; remove</a></div></td>
        </tr>
      </table>
      <br />
    </div>
  </div>
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>Acc - Accepted</strong></td>
          <td width="139"><div align="right">
            <select name="select9" multiple="multiple" class="calloutForm" id="select9" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
            </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select10" multiple="multiple" class="calloutForm" id="select10">
            </select>
          </div></td>
        </tr>
        <tr>
          <td><div align="right"><a href="#" id="add5">add &gt;&gt;</a></div></td>
          <td><div align="left"><a href="#" id="remove5">&lt;&lt; remove</a></div></td>
        </tr>
      </table>
      <br />
    </div>
  </div>
  <div class="calloutForm">
    <div align="center">
      <table width="495">
        <tr>
          <td width="122" rowspan="2"><strong>DNC - Did Not Call</strong></td>
          <td width="139"><div align="right">
            <select name="select11" multiple="multiple" class="calloutForm" id="select11" title="<?php echo $row_allUsers['submittername']; ?>">
              <?php
do {  
?>
              <option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
              <?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
  $rows = mysql_num_rows($allUsersDynamicList);
  if($rows > 0) {
      mysql_data_seek($allUsersDynamicList, 0);
   $row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
  }
?>
            </select>
          </div></td>
          <td width="138" rowspan="2"><div align="center">&gt;&gt;&gt;</div></td>
          <td width="181"><div align="left">
            <select name="select12" multiple="multiple" class="calloutForm" id="select12">
            </select>

Answer 1

您应该考虑以更动态的方式编写代码。与其为每个 "Add" 和 "Remove" 链接编写单独的事件处理程序，不如为页面上的元素提供 classes 并在 class 级别一般处理逻辑。

例如，我建议您的左侧 select 为 "source"，右侧 select 为 class "destination"。为您的 add/remove 链接提供 classes "add" 和 "remove"。要保留排序，只需在文档就绪时存储排序索引，每次重新填充源时，根据存储的索引进行排序。

我已经创建了事件处理程序以及排序 saving/restore 代码。

$(function() {

    //store a sort index for each option item
    $(".source").each(function() {
        $(this).find("option").each(function(index) {
            $(this).data("sortIndex", index);
        });
    });

    $(".add").on("click", function(e) {
        e.preventDefault();
        var that = $(this);
        var destination = that.closest(".calloutForm").find(".destination");
        var options = that.closest(".calloutForm").find(".source").find("option:selected");

        //move selected options
        options.detach().appendTo(destination);

        //remove from other sources
        $(".source").find("option").filter(function(index, element) {
            return options.filter('[value="' + element.value + '"]').length;
        }).remove();
    });

    $(".remove").on("click", function(e) {
        e.preventDefault();

        //remove from current destination and append to all sources
        $(this).closest(".calloutForm").find(".destination").find("option:selected").detach().appendTo(".source");

        //sort options by stored index
        $(".source").each(function() {
            var options = $(this).find("option").detach();
            $(this).append(options.toArray().sort(function(a, b) {
                return $(a).data("sortIndex") > $(b).data("sortIndex");
            }));
        });
    });             
});

您可以在下面的代码片段中看到完整的运行示例。

$(function() {

 //store a sort index for each option item
 $(".source").each(function() {
  $(this).find("option").each(function(index) {
   $(this).data("sortIndex", index);
  });
 });

 $(".add").on("click", function(e) {
  e.preventDefault();
  var that = $(this);
  var destination = that.closest(".calloutForm").find(".destination");
  var options = that.closest(".calloutForm").find(".source").find("option:selected");
  
  //move selected options
  options.detach().appendTo(destination);
  
  //remove from other sources
  $(".source").find("option").filter(function(index, element) {
   return options.filter('[value="' + element.value + '"]').length;
  }).remove();
 });

 $(".remove").on("click", function(e) {
  e.preventDefault();
  
  //remove from current destination and append to all sources
  $(this).closest(".calloutForm").find(".destination").find("option:selected").detach().appendTo(".source");
  
  //sort options by stored index
  $(".source").each(function() {
   var options = $(this).find("option").detach();
   $(this).append(options.toArray().sort(function(a, b) {
    return $(a).data("sortIndex") > $(b).data("sortIndex");
   }));
  });
 });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="calloutForm">
 <tr>
  <td>N/A - No Answer</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>
<table class="calloutForm">
 <tr>
  <td>W - Working</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>
<table class="calloutForm">
 <tr>
  <td>R - Refused</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>
<table class="calloutForm">
 <tr>
  <td>S - School MTFD Approved Only</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>
<table class="calloutForm">
 <tr>
  <td>Acc - Accepted</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>
<table class="calloutForm">
 <tr>
  <td>DNC - Did Not Call</td>
  <td>
   <select multiple class="source">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    <option value="Option3">Option3</option>
    <option value="Option4">Option4</option>
    <option value="Option5">Option5</option>
   </select>
  </td>
  <td>
   &gt;&gt;&gt;
  </td>
  <td>
   <select multiple class="destination">
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <a href="" class="add">add &gt;&gt;</a>
  </td>
  <td>
   <a href="" class="remove">remove &lt;&lt;</a>
  </td>
 </tr>
</table>

从列表中删除“添加”值

Remove 'Added" Values from List

javascript

php

jquery

multi-select