Как фильтровать/клонировать опции выбора с помощью 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> 

Как я могу фильтровать #person варианты на основе значения, выбранного в #project?

Это код 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>