Динамическое создание списков продуктов с флажками в jQuery Mobile оказывается сложным
Я работаю над мобильным приложением списков покупок, которое должно поддерживать пользователя при создании списков покупок.
Я использую инфраструктуру Jquery Mobile для легкого достижения мобильных функций.
Это мой первый веб-проект с использованием HTML и JavaScript.
Я создал простой список продуктов с флажками, Jquery Mobile автоматически его стилизует, и сразу же он выглядит великолепно:
<form action="demoform.asp" id="list" method="post" name="list">
<fieldset data-filter="true" data-input="#myFilter" data-role="controlgroup">
<label for="0">Banane</label>
<input id="0" name="products" type="checkbox">
<label for="1">Gurke</label>
<input id="1" name="products" type="checkbox">
<label for="2">Brokkoli</label>
<input id="2" name="products" type="checkbox">
<label for="3">Chinakohl</label>
<input id="3" name="products" type="checkbox">
<label for="4">Grünkohl</label>
<input id="4" name="products" type="checkbox">
<label for="5">Eisbergsalat</label>
<input id="5" name="products" type="checkbox">
</fieldset>
</form>
Затем я написал функцию javascript, которая принимает массив и записывает содержимое массива в следующем формате:
var options = [
fruits = ['Banane','Gurke','Brokkoli','Chinakohl','Grünkohl','Eisbergsalat'],
drinks = ['Wasser','Cola','Fanta','Sprite','Pils','Radler']
];
function makeUL(array) {
// Create the list element:
var list = document.createElement('fieldset');
list.setAttribute("data-role", "controlgroup");
list.setAttribute("data-filter","true");
list.setAttribute("data-input","#myFilter");
for(var i = 0; i < array.length; i++) {
// Create the list item:
var label = document.createElement('label');
label.setAttribute("for",i);
// Set its contents:
label.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(label);
var input = document.createElement('input');
input.setAttribute("type","checkbox");
input.setAttribute("name","products");
input.setAttribute("id",i);
// Add it to the list:
list.appendChild(input);
}
// Finally, return the constructed list:
return list;
}
// Add the contents of options[0] to #productlist:
document.getElementById('productlist').appendChild(makeUL(options[0]));