2010年12月21日 星期二

實現兩個多重下拉選單中移動所選的項目

先來看Jquery的部分

 $(function() {
    $('#add').click(function() {
        //將select1所選的項目先移除然後放到select2的最下面
        $('#select1 option:selected').remove().appendTo('#select2');
       });
       $('#remove').click(function() {
        //相反的方向
        $('#select2 option:selected').remove().appendTo('#select1');
       });
    //按下送出時只要是select2有的項目就是選取的項目
    //所以還要先將select2有的項目加上己選取才能送出去…
       $('form').submit(function() {
         $('#select2 option').each(function() {
          $(this).attr("selected", "selected");
         });
    });
});

完整程式範例



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">
$(function() {
 $('#add').click(function() {
  //將select1所選的項目先移除然後放到select2的最下面
     $('#select1 option:selected').remove().appendTo('#select2');
    });
    $('#remove').click(function() {
  //相反的方向
     $('#select2 option:selected').remove().appendTo('#select1');
    });
 //按下送出時只要是select2有的項目就是選取的項目
 //所以還要先將select2有的項目加上己選取才能送出去…
    $('form').submit(function() {
   $('#select2 option').each(function() {
    $(this).attr("selected", "selected");
   });
 });
});
</SCRIPT>
<style type="text/css">
#data a {
 display: block;
 border: 1px solid #aaa;
 text-decoration: none;
 background-color: #fafafa;
 color: #123456;
 margin: 2px;
 clear:both;
}
.div {
 float:left;
 text-align: center;
 margin: 10px;
}
#arrow {
 float:left;
 margin: 10px;
 padding-top: 200px;
}
.select {
 width: 200px;
 height: 350px;
}
</style>
</head>
<body>
兩個多重下拉選單中移動所選的項目
<div id="data">
  <div class="div">
    <select multiple id="select1" class="select">
      <option>111111111</option>
      <option>222222222</option>
      <option>478795333</option>
      <option>478797444</option>
      <option>478797555</option>
      <option>478795666</option>
      <option>478797777</option>
      <option>478797888</option>
      <option>478795999</option>
      <option>478797126</option>
      <option>478797134</option>
      <option>478795343</option>
    </select>
  </div>
  <div id="arrow"> <a href="#" id="add">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;</a> <br />
    <a href="#" id="remove">&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;</a> </div>
  <form action="handle.php" method="post">
    <div class="div">
      <select multiple id="select2" name="selectedArr[]" class="select">
      </select>
    </div>
    <input type="submit" value="submit" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </form>
</div>
</body>
</html>

範例圖片:
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)