jQuery перемещает значения MultiSelect в другой MultiSelect - PullRequest
Новая
       9

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

21 голосов
/ 29 июня 2009

Итак, у меня есть окно 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 что-то подобное или это пользовательский фрагмент кода?

Ответы [ 8 ]

67 голосов
/ 02 декабря 2011 
$().ready(function() {  
 $('#add').click(function() {  
  return !$('#select1 option:selected').remove().appendTo('#select2');  
 });  
 $('#remove').click(function() {  
  return !$('#select2 option:selected').remove().appendTo('#select1');  
 });  
});
10 голосов
/ 03 апреля 2013

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

<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>
8 голосов
/ 24 сентября 2013

У меня была такая же проблема, но я нашел способ ее обойти 

<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>
</div>
<div>
    <select multiple id="select2"></select>
</div>

JQuery 

$('#select1').click(function () {
     return !$('#select1 option:selected').remove().appendTo('#select2');
});

$('#select2').click(function () {
     return !$('#select2 option:selected').remove().appendTo('#select1');
 });

если хотите добавить кнопку добавить >> и JQuery нажмите здесь селектор

пример http://jsfiddle.net/diffintact/GJJQw/3/

6 голосов
/ 29 июня 2009

Существует плагин jquery под названием crossSelect , который, кажется, делает то, что вы хотите.

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

2 голосов
/ 12 апреля 2016

Если у вас все в порядке с плагином, этот плагин работает хорошо.

http://crlcu.github.io/multiselect/#home

2 голосов
/ 14 марта 2011 
$('#boxa option').appendTo('#boxb');
0 голосов
/ 17 августа 2016

При использовании Bootstrap я нашел bootstrap-duallistbox весьма удобным.

  • Фильтруемый
  • Адаптивный
  • Localizable
  • Сильно настраиваемый
  • Кажется, в хорошем состоянии
0 голосов
/ 18 декабря 2015

Вот мой HTML-код 

<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>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
        <a href="#" id="add">add &gt; &gt;</a>
    </div>
    <div>
        <select multiple id="select2"></select>
        <a href="#" id="remove">remove &lt; &lt;</a>
    </div>

и код Javascript 

$("#add").click(function(){
    $("#select1 option:selected").remove().appendTo($("#select2"));
})
$("#remove").click(function(){
    $("#select2 option:selected").remove().appendTo($("#select1"));
})

Убедитесь, что вы импортировали jquery.js файл.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...