Динамическое заполнение Выбрать параметры с помощью jQuery

Question

Динамическое заполнение Выбрать параметры с помощью jQuery

0

Я ищу лучший способ справиться с динамическим заполнением моих параметров с помощью 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.

У кого-нибудь есть предложения?

isaac weathers 18 фев. 2014, в 03:40

Источник

0

Почему данные настолько многословны? Вы можете упростить и абстрагировать, если вы получаете прямые коллекции из вашего JSON, а не вложенный объект.
elclanrs 18 фев. 2014, в 01:51
0

Да, это было бы то, что я искал ... поэтому не каждый список из уникальной определенной переменной, а основной список JSON.
isaac weathers 18 фев. 2014, в 01:54

Теги:

javascript

jquery

html

options

1 ответ

Ещё вопросы

Почему данные настолько многословны? Вы можете упростить и абстрагировать, если вы получаете прямые коллекции из вашего JSON, а не вложенный объект.
Да, это было бы то, что я искал ... поэтому не каждый список из уникальной определенной переменной, а основной список JSON.

elclanrs · Accepted Answer · 2014-02-18T00-46-00.000Z

Я бы предложил вам упростить свои данные как коллекцию, а не вложенные объекты, таким образом, вы сможете легче абстрагироваться:

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

Это именно то, что я искал. Спасибо. Дали тебе победу.