动态填充选择选项与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

回答

相关问题