JQuery удалить выбранный элемент и добавить к другому

Question

Я пытаюсь повторно добавить «удаленную опцию» в соответствующее меню выбора.

У меня есть три поля выбора: «Категории», «Переменные» и «Цель». «Категории» - это цепочечный выбор, поэтому, когда пользователь выбирает из него параметр, в поле выбора «Переменные» вводятся параметры, относящиеся к параметру выбранных категорий. Когда пользователь выбирает параметр в поле выбора «Переменные», он добавляется в поле выбора «Цель». У меня есть функция «удалить выбранное», так что если пользователь «удаляет» выбранный элемент из поля «Цель», он удаляется из «Цель» и помещается обратно в пул параметров «Переменные». У меня проблема в том, что он добавляет опцию к элементам «Переменные» без разбора. То есть, если выбранной категорией является «Возраст», все параметры «Переменные» имеют класс «возраст». Но если удаленный параметр является элементом дохода, он отобразится в списке параметров возраста.

Вот разметка HTML:

<select multiple="" id="categories" name="categories[]">
  <option class="category" value="income">income</option>
  <option class="category" value="gender">gender</option>
  <option class="category" value="age">age</option>
</select>

<select multiple="multiple" id="variables" name="variables[]">
  <option class="income" value="10">$90,000 - $99,999</option>
  <option class="income" value="11">$100,000 - $124,999</option>
  <option class="income" value="12">$125,000 - $149,999</option>
  <option class="income" value="13">Greater than $149,999</option>
  <option class="gender" value="14">Male</option>
  <option class="gender" value="15">Female</option>
  <option class="gender" value="16">Ungendered</option>
  <option class="age" value="17">Ages 18-24</option>
  <option class="age" value="18">Ages 25-34</option>
  <option class="age" value="19">Ages 35-44</option>
</select>

<select height="60" multiple="multiple" id="target" name="target[]">
</select>

А вот JS:

/* This determines what options are display in the "Variables" select box */
    var cat = $('#categories');
    var el = $('#variables');

    $('#categories option').click(function() {
        var class = $(this).val();
        $('#variables option').each(function() {
            if($(this).hasClass(class)) {
                $(this).show();
            } else {
               $(this).hide();
            }
        });
    });

/* This adds the option to the target select box if the user clicks "add" */
    $('#add').click(function() {  
        return !$('#variables option:selected').appendTo('#target');  
    });

/* This is the remove function in its current form, but doesn't append correctly */
    $('#remove').click(function() {
                $('#target option:selected').each(function() {
                        var class = $(this).attr('class');

                        if($('#variables option').hasClass(class)) {
                                $(this).appendTo('#variables');
                                sortList('variables');
                        }
                });
    });

Answer 1

Вы действительно обнаружите, что идете по неверному пути, поскольку вы не можете "скрыть" элементы параметров в разных браузерах. Вам действительно нужно добавить и удалить их, чтобы изменить список.

Я собрал рабочую версию того, что вы ищете, и вы можете просмотреть его или отредактировать на JSBin.

Основной поток выглядит следующим образом:

1. При загрузке страницы возьмите все параметры из #variables и сохраните их в хэш / массив для дальнейшего использования.
2. Создайте функцию update_variables, которая очищает список переменных, добавляет все правильные для выбранной категории. Важной частью здесь является то, что он проверяет, есть ли у цели элемент с таким значением, и не будет добавлять его снова, поскольку он уже добавлен к цели.
3. В «Добавить» просто добавьте выбранные элементы от #variables до #target и отмените выбор.
4. В «Удалить» просто удалите выбранные элементы из #target и позвоните update_variables()

Вот выборка из нескольких методов. Посмотрите на исходный код JSBin для получения всего необходимого кода:

opts в конечном итоге выглядит так:

var opts = {
    'age':[
       { label: 'Ages 18-24', value: 17 },
       { label: 'Ages 25-34', value: 18 },
       { label: 'Ages 35-44', value: 19 }
    ]
    ....
}

Вот функция update_variables:

function update_variables(){
   var cat = $cats.val(), new_opts = [];
   $vars.empty();

   $.each(opts[cat], function(){
     if( $target.find('[value=' + this.value + ']').length === 0 ){
       new_opts.push(option(this.value, this.label));
     }
   });

   $vars.html(new_opts.join(''));
}

Примечание: функция option() - это маленький помощник, который создает HTML для элемента option.

Answer 2

Посмотрите на метод jQuery 1.4 detach () .

Я верю, что это то, что вам нужноможет свободно перемещать элементы от одного к другому ..

Answer 3

Если предположить, что вы хотите переместить, в $(this), и вы хотите добавить его к $(some_other_thing), вы можете использовать $(some_other_thing).append($(this).html()), затем $(this).hide() или $(this).remove().