Question

我正在寻找一种更好的方法来处理使用JS和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);

使用它来填充下拉列表：

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

所以我想要的是只有一个主要功能，根据它的相关JSON填充每个唯一ID。

有人有什么建议吗？

Answer 1

我建议您将数据简化为集合，而不是嵌套对象，这样您就可以更轻松地进行抽象：

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'
});

使用jQuery动态填充选择选项

1 个答案: