動態填充選擇選項與jQuery

我正在尋找一種更好的方式來處理的使用JS和JQuery我的選擇動態填充。我有什麼工作，但我正在尋找一種方法，不需要每次我需要填充列表時都寫這個函數。動態填充選擇選項與jQuery

什麼我做的是填充這些：

<label for="recordPurchaseTimeFrameID" class="input required">When would you like to move?</label> 
<select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">

<label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label> 
<select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range">

使用這些腳本：

var rPTJsonListItems= ""; 
for (var i = 0; i < rPTJsonList.recordPurchaseTimeTable.length; i++){ 
rPTJsonListItems+= "<option value='" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeValue + "'>" + rPTJsonList.recordPurchaseTimeTable[i].recordPurchaseTimeAmount + "</option>"; 
    }; 
    $("#recordPurchaseTimeFrameID").html(rPTJsonListItems); 

var rPPJsonListItems= ""; 
for (var i = 0; i < rPPJsonList.recordPurchasePriceTable.length; i++){ 
rPPJsonListItems+= "<option value='" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceValue + "'>" + rPPJsonList.recordPurchasePriceTable[i].recordPurchasePriceAmount + "</option>"; 
    }; 
    $("#recordPurchasePriceRangeID").html(rPPJsonListItems);

並使用此爲P opulate的下拉菜單：

var rPTJsonList = { 
"recordPurchaseTimeTable" : 
      [ 
      {"recordPurchaseTimeValue" : "","recordPurchaseTimeAmount" : "Select"}, 
.... 
]}; 
var rPPJsonList = { 
"recordPurchasePriceTable" : 
      [ 
      {"recordPurchasePriceValue" : "","recordPurchasePriceAmount" : "Select"}, 
      {"recordPurchasePriceValue" : "75k-100k","recordPurchasePriceAmount" : "$75,000 - $100,000"}, 
.... 
});

所以我想是有填充基於它的相關JSON每一個獨特的ID只是一個主要功能。

任何人有任何建議嗎？

來源

2014-02-18 isaac weathers

爲什麼數據，以便詳細？如果您從JSON獲取直集合，而不是嵌套對象，則可以簡化和抽象。 – elclanrs

是的，這會是什麼，我期待的...所以不必每個列表從一個獨特的定義的變量，但主JSON列表，而不是未來。 –

我建議您簡化數據的集合，而不是嵌套的對象，這樣你可以抽象更輕鬆：

var timeTable = [{ 
    "recordPurchaseTimeValue": "", 
    "recordPurchaseTimeAmount": "Select" 
}, { 
    "recordPurchaseTimeValue": "3-6", 
    "recordPurchaseTimeAmount": "3-6 months" 
}, { 
    "recordPurchaseTimeValue": "6-9", 
    "recordPurchaseTimeAmount": "6-9 months" 
}, { 
    "recordPurchaseTimeValue": "9-12", 
    "recordPurchaseTimeAmount": "9-12 months" 
}, { 
    "recordPurchaseTimeValue": "12", 
    "recordPurchaseTimeAmount": "Over 12 months" 
}]; 

var priceTable = [{ 
    "recordPurchasePriceValue": "", 
    "recordPurchasePriceAmount": "Select" 
}, { 
    "recordPurchasePriceValue": "75k-100k", 
    "recordPurchasePriceAmount": "$75,000 - $100,000" 
}, { 
    "recordPurchasePriceValue": "100k-125k", 
    "recordPurchasePriceAmount": "$100,000 - $125,000" 
}, { 
    "recordPurchasePriceValue": "125k-150k", 
    "recordPurchasePriceAmount": "$125,000 - $150,000" 
}, { 
    "recordPurchasePriceValue": "150k-200k", 
    "recordPurchasePriceAmount": "$150,000 - $200,000" 
}, { 
    "recordPurchasePriceValue": "200k-250k", 
    "recordPurchasePriceAmount": "$200,000 - $250,000" 
}, { 
    "recordPurchasePriceValue": "250k-300k", 
    "recordPurchasePriceAmount": "$250,000 - $300,000" 
}, { 
    "recordPurchasePriceValue": "300k-350k", 
    "recordPurchasePriceAmount": "$300,000 - $350,000" 
}, { 
    "recordPurchasePriceValue": "350k-400k", 
    "recordPurchasePriceAmount": "$350,000 - $400,000" 
}, { 
    "recordPurchasePriceValue": "400k-500k", 
    "recordPurchasePriceAmount": "$400,000 - $500,000" 
}, { 
    "recordPurchasePriceValue": "500k-700k", 
    "recordPurchasePriceAmount": "$500,000 - $700,000" 
}, { 
    "recordPurchasePriceValue": "700k-900k", 
    "recordPurchasePriceAmount": "$700,000 - $900,000" 
}, { 
    "recordPurchasePriceValue": "900k", 
    "recordPurchasePriceAmount": "$900,000" 
}];

然後你就可以創建一個函數來填充給出的數據作爲一個集合選擇以及要映射到給定密鑰的每個生成選項上設置的屬性。

我們可以使用文檔片段以提高性能，因爲你只需要追加到DOM一次。

演示：http://jsfiddle.net/Ls4mD/

function populateSelect(select, data, attrs) { 
    var frag = document.createDocumentFragment(); 
    data.forEach(function(option) { 
    var opt = document.createElement('option'); 
    for (var i in attrs) { 
     opt[i] = option[attrs[i]]; 
    } 
    frag.appendChild(opt); 
    }); 
    select.appendChild(frag.cloneNode(true)); 
} 

var time = document.getElementById('recordPurchaseTimeFrameID'); 
var price = document.getElementById('recordPurchasePriceRangeID'); 

populateSelect(time, timeTable, { 
    value: 'recordPurchaseTimeValue', 
    textContent: 'recordPurchaseTimeAmount' 
}); 

populateSelect(price, priceTable, { 
    value: 'recordPurchasePriceValue', 
    textContent: 'recordPurchasePriceAmount' 
});

來源

2014-02-18 02:10:04 elclanrs

這就是我正在尋找的。謝謝。給你勝利。 –

動態填充選擇選項與jQuery

回答

相關問題