如何使用jQuery过滤/克隆选择框选项？

Question

我有以下两个选择框：

<select id="project"> 
    <option data-person_ids="[75,76,77]">None</option> 
    <option data-person_ids="[77]">Project A</option> 
    <option data-person_ids="[75,76]">Project B</option> 
    <option data-person_ids="[75]">Project C</option> 
</select> 

<select id="person"> 
    <option value="75">Person A</option> 
    <option value="76">Person B</option> 
    <option value="77">Person C</option> 
</select> 

如何过滤基于在#project选择价值#person选择？

这是一个jQuery代码段同事想出了，但我无法得到它的工作，因为我还是新的jQuery的：

$(function() { 

    var $person = $('#person'); 

    $allPersonOptions = $person.children(); 

    $('#project').on('change', function() { 
    var selected_project = $('#project').data('person_ids'); 
    filterOptions($allPersonOptions.clone(), +selected_project).appendTo($person.empty()); 
    }); 

}); 

function filterOptions($options, id) { 
    return $options.filter(function() { 
    return $.inArray(id, $(this).data('project_ids')) > -1 
    }); 
} 

感谢在这个问题上的任何帮助。

Answer 1

那么你的同事给你的代码不好。

首先

var selected_project = $('#project').data('person_ids'); 

将返回不确定的，因为它不是选择，它是在选项。它不会奇迹般地获得所选选项的数据属性

var selected_project = $('#project option:selected').data('person_ids'); 

接下来是代码

filterOptions($allPersonOptions.clone(), +selected_project).appendTo($person.empty()); 
             ^^^ 

这是打算做一个转换，坏随机+。

接下来在滤波代码为寻找一个数据属性

return $.inArray(id, $(this).data('project_ids')) > -1 

有上选择的选项中没有数据属性。参数被切换。

$(function() { 
 

 
    var $person = $('#person'); 
 

 
    $allPersonOptions = $person.children(); 
 

 
    $('#project').on('change', function() { 
 
    var selected_project = $('#project option:selected').data('person_ids'); 
 
    filterOptions($allPersonOptions.clone(), selected_project).appendTo($person.empty()); 
 
    }); 
 

 
}); 
 

 
function filterOptions($options, id) { 
 
    return $options.filter(function() { 
 
    return $.inArray(parseInt(this.value,10), id) > -1 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="project"> 
 
    <option data-person_ids="[75,76,77]">None</option> 
 
    <option data-person_ids="[77]">Project A</option> 
 
    <option data-person_ids="[75,76]">Project B</option> 
 
    <option data-person_ids="[75]">Project C</option> 
 
</select> 
 

 
<select id="person"> 
 
    <option value="75">Person A</option> 
 
    <option value="76">Person B</option> 
 
    <option value="77">Person C</option> 
 
</select>

Answer 2

我有一个可重用allPersonOptions（无需克隆），只有副本适用选项的版本。

$(function() { 
 
    var $person = $('#person'); 
 
    $allPersonOptions = $person.children(); 
 
    
 
    $('#project').on('change', function() { 
 
    var ids = $('#project option:selected').data('person_ids'); 
 
    $person.empty(); 
 
    $allPersonOptions.each(function() { 
 
     var id = parseInt($(this).attr('value')); 
 
     if ($.inArray(id, ids) != -1) 
 
     $person.append(this); 
 
    }) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="project"> 
 
    <option data-person_ids="[75,76,77]">None</option> 
 
    <option data-person_ids="[77]">Project A</option> 
 
    <option data-person_ids="[75,76]">Project B</option> 
 
    <option data-person_ids="[75]">Project C</option> 
 
</select> 
 

 
<select id="person"> 
 
    <option value="75">Person A</option> 
 
    <option value="76">Person B</option> 
 
    <option value="77">Person C</option> 
 
</select>