您的位置: 首页  >  技术问答  >  从列表中删除“已添加”值

从列表中删除“已添加”值

分类: 技术问答 • 2022-03-17 22:32:15

从列表中删除“已添加”值

问题描述：

So I have 6 ROWS of multi-list fields. When the user selects a value, and clicks 'Add', the value is moved to the 'Add' list, and is removed from the 'Remove' list.

However, given that all rows have the same values, If the user selects one value from Row 1 'Add' box, I would like it removed from row 2, 3, 4, 5, 6 'Add' boxes as well.

This is super difficult to explain so, here ya go:

 <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>

</div>

答

You should think about writing your code in a more dynamic way. Instead of writing your individual event handlers for each "Add" and "Remove" links, give the elements on your page classes and handle the logic generically at the class-level.

For example, I'd suggest giving your left-side selects a class of "source" and your right-side selects a class of "destination". Give classes "add" and "remove" to your add/remove links. To retain the sorting, just store a sorting index on document ready, and each time the sources are repopulated, sort based on the stored index.

I've created event handlers as well as sorting saving/restore code.

$(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");
            }));
        });
    });             
});

You can see a full running example in the snippet below.

$(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>

</div>

相关推荐