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

您实际上会发现您正走在错误的道路上，因为您无法在浏览器中一致地“隐藏”选项元素。您实际上需要添加和删除它们来更改列表。

我整理了您正在寻找的内容的工作版本，您可以 view it或edit it在 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 的小助手。