doushadu0901 2015-02-23 17:35
浏览 16
已采纳

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

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>
  • 写回答

1条回答 默认 最新

  • dongsong4418 2015-02-23 18:56
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！