javascript - 根据 Jquery 父级多选列表中选择的值构建子菜单

Question

我需要根据第一个选择列表(是多个)中选择的选项构建第二个选择列表。然而我的附加是添加倍数。我的警报返回

第一个警报 1

第二次警报 1,5

第三次警报 1.5,7

我需要为最后选择的选项进行追加。

$('#firstselect').change(function(){
       alert('id ' + $(this).val());
        $('#secondselect').append('<option value=' + $(this).find(':selected:last').val() +'>' + $(this).find(':selected:last').text()) + '</option>';
});

Answer 1

你已经很接近了，但你不需要单独附加选项或手动构建它们，只需克隆它们并交换第二个 <select> 的 html

$('#firstselect').change(function(){
    var cloned = $(this).find(':selected').clone();
    $('#secondselect').html(cloned);
});

这将按原始顺序添加所有选定的选项。当然，您可能希望它们按照选择的顺序插入。这有点棘手，因为您必须跟踪何时选择的内容以及实际取消选择的内容，但这里也有一个解决方案:

var last_selected;
$('#altfirstselect').change(function() {
    var selected = $(this).find(':selected');
    var cloned = selected.not(last_selected).clone();
    if(last_selected) { 
        var to_remove = last_selected.not(selected);
        to_remove.each(function(){
            $('#altsecondselect').find('[value='+$(this).val()+']').remove();
        });
    }
    $('#altsecondselect').append(cloned);
    last_selected = selected;
});

我创建了一个 fiddle ，您可以在其中看到两种解决方案的实际效果，并了解它们如何根据您选择的顺序以不同的方式工作:http://jsfiddle.net/xu333zxs/2/