将唯一数组项过滤到选择列表

时间:2015-10-29 21:11:02

标签: jquery drop-down-menu filter

我在网上做了一些研究,发现了类似的帖子,但没有处理选择列表。我认为我的解决方案可以解决问题,但我在几次尝试中失败了。我有一个存储在本地存储中的JSON对象。数据是:

Contract Id    Contract Number
     4              232-JV-09
     4              232-JV-09
     5              871-PS-03
     7              008-IK-44
     7              008-IK-44
     7              008-IK-44
     9              101-LL-39

我试图在我的选择列表中看到每个合同ID /合同号中的一个。我的代码如下(包括尝试失败);

function PreFetchSurveyContracts() {

    var preFetchSurveyData = JSON.parse(window.localStorage.getItem("preFetchSurveyData"));
    $("#prefetch_contract_numbers").append($('<option value="-1"></option>'));

    var fieldArrayIds = [];
    var fieldArrayNums = [];

    $.each(preFetchSurveyData, function(index,item) {
        if ($.inArray(item.CONTRACT_NUMBER,fieldArrayNums) === -1) {
            fieldArrayIds.push(item.CONTRACT_NUMBER);
            fieldArrayNums.push(item.SURVEY_CONTRACT_ID);
            //fieldArrayIDs[item.SURVEY_CONTRACT_ID] = item.SURVEY_CONTRACT_ID;
            $("#prefetch_contract_numbers").append($('<option value="' + fieldArrayIds[index]/*item.SURVEY_CONTRACT_ID*/+ '">' + fieldArrayNums[index]/*item.CONTRACT_NUMBER*/ + '</option>'));
        }
    });
}

这不起作用,但这是我尝试的最后一次尝试。它似乎是按每个角色分裂它们。而且我甚至可能不需要两个单独的阵列。叹了口气,我在这一点上有点沮丧。任何有关此主题的帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分:1)

如果您能够从本地源提取有效的JsonString,则可以执行以下操作:

<select id="prefetch_contract_numbers">
</select>

var jsonObj = '[{"Contract_Id":"4","Contract_Number":"232-JV-09"},            {"Contract_Id":"5","Contract_Number":"232-AJ-09"},              {"Contract_Id":"6","Contract_Number":"232-DY-11"}]';
var ConvertedArrayObj = $.parseJSON(jsonObj);

$.each(ConvertedArrayObj,function(i)
{
    $("#prefetch_contract_numbers").append("<option value='" + ConvertedArrayObj[i]["Contract_Id"] + "'>" + ConvertedArrayObj[i]["Contract_Number"] + "</option>");

});

http://jsfiddle.net/ghjhjz03/

更新:避免重复

$.each(ConvertedArrayObj,function(i)
{
    var key = ConvertedArrayObj[i]["Contract_Id"];
    var value = ConvertedArrayObj[i]["Contract_Number"];
    if($("#prefetch_contract_numbers option[value='" + key + "']").length === 0)
      $("#prefetch_contract_numbers").append("<option value='" + key + "'>" + value + "</option>");    
});

http://jsfiddle.net/ghjhjz03/1/

答案 1 :(得分:0)

看到这个小提琴:http://jsfiddle.net/b8v9m4yy/

var preFetchSurveyData = [{"ContractID": 4,"ContractNumber": "232-JV-09"},{"ContractID": 4,"ContractNumber": "232-JV-09"},{"ContractID": 5,"ContractNumber": "871-PS-03"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 7,"ContractNumber": "008-IK-44"},{"ContractID": 9,"ContractNumber": "101-LL-39"}]

// create 2 array variables. 1 to hold the unique objects
// one to hold just the contract ids
var unique = [];
var ids = []
$.each(preFetchSurveyData, function(idx, item){

    // check to see if contract ID already exists in array
    if($.inArray(item.ContractID, ids) === -1){ 

        // if doesn't already exist add the item to the unique array
        // and the ContractID to the ids array
        unique.push(item);
        ids.push(item.ContractID);
    }
});

$("#prefetch_contract_numbers").append($('<option value="-1">- Select -</option>'));

// loop through the unique items and add them to the select
$.each(unique, function(idx, item){
    $("#prefetch_contract_numbers").append($('<option value="' + item.ContractID + '">' + item.ContractNumber + '</option>'));
});