Question

我需要将某些<option>元素从一个<select>列表移动到另一个列表 - 也可能来回移动 - 所以它不能依赖于硬编码数据而我需要定位我希望通过<option>属性移动的value元素。

所以说我有这个HTML：

<option value="1">cat #1</option>
<option value="2">cat #2</option>
<option value="3">cat #3</option>
<option value="4">cat #4</option>
<option value="5">cat #5</option>
<option value="6">cat #6</option>

然后说我想要值为3,4,5的元素我该怎么做？

修改：如果我可以传递上述所需的值，例如3,4,5，那将是理想的。

编辑2 ：这些值也需要从它们的选择列表中删除。

我收到数据后，我会将其附加到另一个选择列表，例如：

$(dataVar).appendTo('#selected_cats');

Answer 1

使用属性选择器：

var selector = dataVar.split(',').map(function(el) {
    return 'option[value='+el.trim()+']';
}).join(',');
$(selector).appendTo('#selected_cats');

DEMO

Answer 2

我做的是这个..

var data_holder = '';

$.each(mr_val, function(index, number) {
    data_holder += '#all_cats option[value="' + number + '"], ';
});        

// Ge rid of last space & comma
data_holder = rtrim(data_holder, ' ,');

// Now remove options from first select and append to the other
var options = $(data_holder).appendTo('#selected_cats');

Answer 3

这样的东西......？

function moveOptions(sourceList, targetList, movableValues) {
    sourceList.find('option').each(function(){
        if (movableValues.indexOf($(this).val()) > -1) {
            $(this).appendTo(targetList);
        }
    });
}

// Usage:
var pullFrom = $("#list1");
var moveTo = $("#list2");
var moveThese = ['3','4','5'];

moveOptions( pullFrom, moveTo, moveThese );

按值获取选择列表选项元素

3 个答案: