如何使用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>