Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

Попробуйте следующее (взято из 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>

Ответ 4

У меня была такая же проблема, но я узнал об этом.

<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');
 });

если хотите, чтобы кнопка добавила add → gt; и селектор щелчков jquery здесь

example http://jsfiddle.net/diffintact/GJJQw/3/

Ответ 5

$('#boxa option').appendTo('#boxb');

Ответ 7

Вот мой 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.

Ответ 8

Если вы используете Bootstrap, я нашел bootstrap-duallistbox довольно удобный.

  • Фильтруемый
  • Адаптивный
  • Localizable
  • Высоко настраиваемый
  • Удовлетворительно