JavaScript перенос данных между activeListBox yii2

372

11 мая 2017, 12:59

Есть 2 таблицы activeListBox. В одной есть данные, во второй нет. Как мне сделать перенос выбранных данных из одной таблицы в другую по нажатию на соответствующую клавишу?

Код view:

<div role="tabpanel" class="tab-pane active panel panel-primary" id="questionintopik">
   <div class="row">
      <!-- Таблица №1 -->
      <div class="col-lg-5">
         <?php Pjax::begin(); ?>
            <h4>Вопросы не входящие в эту тему</h4>
            <input id="search-avaliable">
            <a href="#" id="btn-refresh"> <span class="glyphicon glyphicon-refresh"></span> </a> <br>
            <?= Html::activeListBox($model, 'ID_REC', $LeftItems, ['multiple' => true, 'size' => 20, 'style' => 'width: 100%']) ?>
         <?php Pjax::end(); ?>
      </div>
      <!-- Кнопки -->
      <div class="col-lg-1">
      <br><br><br><br><br><br><br><br><br><br>
      <script type="text/javascript">
         function PastToRight()
         {
            alert("Add to right!");
         }
         function PastToLeft()
         {
            alert("Add to left!");
         }
      </script>
      <a id="btn-add" class="btn btn-success" onclick="PastToRight()" >&gt;&gt;</a><br>
      <a id="btn-remove" class="btn btn-danger" onclick="PastToLeft()">&lt;&lt;</a>
      </div>
      <!-- Таблица №2 -->
      <div class="col-lg-5">
         <?php Pjax::begin(); ?>
            <h4>Вопросы входящие в эту тему</h4>
            <input id="search-assigned"><br>
            <?= Html::activeListBox($model, 'ID_REC', $RightItems, ['multiple' => true, 'size' => 20, 'style' => 'width: 100%']) ?>
         <?php Pjax::end(); ?>
      </div>
   </div>
</div>

Вот как это выглядит:

Answer 1

Вот набросал рабочий пример, дадите селекторы только своих селектов и замените в js:

        $(function() { 
            $(document).on('click', '#btn-add', function(event) { 
                event.preventDefault(); 
                var selected = $(document).find('#first option:selected'); 
                if (selected.length > 0) { 
                    selected.appendTo('#second'); 
                } 
            }); 
 
            $(document).on('click', '#btn-remove', function(event) { 
                event.preventDefault(); 
                var selected = $(document).find('#second option:selected'); 
                if (selected.length > 0) { 
                    selected.appendTo('#first'); 
                } 
            }); 
        });

<html> 
    <select name="first" id="first" size="5" style="width: 100px;" multiple> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
    </select> 
<br> 
      <a id="btn-add" class="btn btn-success"  >&gt;&gt;</a> 
      <br> 
      <a id="btn-remove" class="btn btn-danger">&lt;&lt;</a> 
<br> 
    <select name="second" id="second" size="5" style="width: 100px;" multiple> 
    </select> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</html>

Answer 2

Так хотите?

http://stackoverflow.com/questions/23080087/how-to-transfer-listbox-value-to-another-listbox-using-jquery

http://jsfiddle.net/fLAy6/1/

$("#moveright").click(function(){
   $("#country > option:selected").each(function(){
        $(this).remove().appendTo("#planets");
   });
});

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Кнопка и горячие клавиши браузера

Создал <button> и хочу, чтобы она активизировала встроенный в браузер hotkey,в моем случае нужна функция (Ctrl+S) для сохранения уже загруженной...

494

javascript

WordPress Ajax загрузка файлов

Добрый день коллеги, возникла необходимость в форме которая отправляется с помощью Ajax переслать файл, что увидел c использованием jQuery: jqueryjs?ver=1

381

javascript

Карты изображения + javascipt

Есть картинка и внутри этой картинки сделал ссылки (image map) через кодНо при клике ссылка не передает значение в поле input с айдишником zubn

305

javascript

Менять cursor только на определенной области

305