Вопрос по jquery – jQuery перемещает значения MultiSelect в другой MultiSelect

20

Так что у меня есть окно MultiSelect со значениями x, которое мне нужно переместить в другое окно MultiSelect и наоборот.

<select class="boxa" multiple="multiple">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select class="boxb" multiple="multiple">

</select>

Нужно переместить все или одно из значений boxa в boxb одним нажатием кнопки, а также с возможностью перемещения значений обратно из boxb в boxa.

Есть ли в jQuery что-то подобное или это нестандартный фрагмент кода?

Ваш Ответ

3   ответа
6

CrossSelect которая, кажется, делает то, что ты хочешь.

@jQuery этого нет, вам нужно либо найти понравившийся плагин и использовать его, либо написать свой собственный. (И, конечно, вы неимею чтобы использовать jQuery для написания или использования, вы можете реализовать его в чистом javascript, если хотите)

Идеально, спасибо, это именно то, что мне нужно. Phill Pafford
Вышеупомянутая ссылка уже не работает. Jatin Dhoot
66
$().ready(function() {  
 $('#add').click(function() {  
  return !$('#select1 option:selected').remove().appendTo('#select2');  
 });  
 $('#remove').click(function() {  
  return !$('#select2 option:selected').remove().appendTo('#select1');  
 });  
});
Это должен быть принятый ответ - отлично работает без плагинов. ThatAintWorking
Что такое возвращение и! для alonso.torres
@ alonso.torres для возврата false из Blog.jeremymartin.name / 2008/02 / ...: Чтобы предотвратить прокрутку страницы вверх, когда пользователь нажимает кнопку (в некоторых браузерах), я добавил return false; в обработчики событий click. ArieKanarie
10

Попробуйте следующее (взято изhttp: //blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.htm)

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

 <style type="text/css">  
  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;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  }  
 </style>  

</head>  

<body>  
 <div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>  
</body>  
</html> 

Похожие вопросы