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上view it或edit it。

基本流程如下：

在页面加载时，从#variables中获取所有选项，然后将其存储在哈希/数组中以供日后使用。
创建一个清空变量列表的update_variables函数，为所选类别添加所有正确的函数。这里的重要部分是它检查目标是否已经具有该值的项目，并且不会再添加它，因为它已经添加到目标。
点击“添加”，只需将#variables中的所选元素附加到#target并取消选中。
点击“删除”只需从#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。

Answer 2

假设您要移动的内容位于$(this)，并且您希望将其附加到$(some_other_thing)，则可以使用$(some_other_thing).append($(this).html())，然后$(this).hide()或{{1} }。

Answer 3

查看jQuery 1.4 detach()方法..

我相信这就是你想要的......用它和appendTo()你可以自由地将元素从一个元素移动到另一个元素。

jquery删除所选元素并附加到另一个元素

3 个答案: