XML文件：
ss.xml
xml文件中有12k条记录
<record id="R1">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>3 Row Band</Attribute2>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes>Satin</Finishes>
<SearchStyleNo>GR8138K-SS</SearchStyleNo>
<Month>June</Month>
<Year>2009</Year>
<TotalWeight>1.02</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R2">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Ladies Ring</ProductCategory>
<SubCategory>Wedding Band</SubCategory>
<Attribute2> </Attribute2>
<DiamondWeightRange>0.29 - 0.35 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes> </Finishes>
<SearchStyleNo>GMR048F-W</SearchStyleNo>
<Month>July</Month>
<Year>2008</Year>
<TotalWeight>0.3</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R3">
<Imgpath>GRB728K-W.JPG</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<SearchStyleNo>GRB728K-W</SearchStyleNo>
<Month>August</Month>
<Year>2008</Year>
<TotalWeight>0.97</TotalWeight>
</record>
<record id="R4">
<Imgpath>GRF001D-X.jpg</Imgpath>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>7 Stone Band, Combination of Metal</Attribute2>
<DiamondWeightRange>0.16 - 0.18 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<Finishes>Satin</Finishes>
<SearchStyleNo>GRF001D-X</SearchStyleNo>
<Month>September</Month>
<Year>2008</Year>
<TotalWeight>0.18</TotalWeight>
</record>
JavaScript的：
加载xml数据
<script type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
async: false
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
$(document).ready(function () {
try {
xmlDoc = loadXMLDoc("ss.xml");
x = xmlDoc.getElementsByTagName("record");
//For every element, loop
var col = 4;
var total = x.length;
var row = Math.ceil(x.length / 4);
var table = $('<table></table>');
for (r = 0; r <= row; r++) {
var rowtr = $('<tr></tr>');
var t = 0;
if (r == 0) {
t == r;
}
else {
var t = (r * 4) + 1;
}
if (total - t >= col) {
col = 4;
}
else {
col = total - t;
}
for (c = 0; c < col; c++) {
var imgpath = xmlDoc.getElementsByTagName("Imgpath")[t].childNodes[0].nodeValue;
var exc = xmlDoc.getElementsByTagName("Exclusives")[t].childNodes[0].nodeValue;
var coll = xmlDoc.getElementsByTagName("Collection")[t].childNodes[0].nodeValue;
// alert(coll);
var Pcat = xmlDoc.getElementsByTagName("ProductCategory")[t].childNodes[0].nodeValue;
var Scat = xmlDoc.getElementsByTagName("SubCategory")[t].childNodes[0].nodeValue;
var Att = xmlDoc.getElementsByTagName("Attribute2")[t].childNodes[0].nodeValue;
var DiaWtRange = xmlDoc.getElementsByTagName("DiamondWeightRange")[t].childNodes[0].nodeValue;
var CenStoneRange = xmlDoc.getElementsByTagName("CenterStoneWeightRange")[t].childNodes[0].nodeValue;
var CenShape = xmlDoc.getElementsByTagName("CenterShape")[t].childNodes[0].nodeValue;
var SShape = xmlDoc.getElementsByTagName("SideShape")[t].childNodes[0].nodeValue;
var CenSetting = xmlDoc.getElementsByTagName("CenterSetting")[t].childNodes[0].nodeValue;
var Fin = xmlDoc.getElementsByTagName("Finishes")[t].childNodes[0].nodeValue;
var SSNo = xmlDoc.getElementsByTagName("SearchStyleNo")[t].childNodes[0].nodeValue;
var Mon = xmlDoc.getElementsByTagName("Month")[t].childNodes[0].nodeValue;
var Yr = xmlDoc.getElementsByTagName("Year")[t].childNodes[0].nodeValue;
var TotWeight = xmlDoc.getElementsByTagName("TotalWeight")[t].childNodes[0].nodeValue;
var CenStWeight = xmlDoc.getElementsByTagName("CenterStWeight")[t].childNodes[0].nodeValue;
rowtr.append('<td><img src="' + imgpath + '" height="200px" width="200px" class="zoom_img"/><br/> Style No: ' + SSNo + '<br/> Product: ' + Pcat + '<br/> Category: ' + Scat + '<br/> Center stone weight: ' + CenStWeight + '<br/> Total weight: ' + TotWeight + '<br/>' + '<input type="button" value="Add to Selection" style="border-radius: 5px;" onclick="' + AddtoCart(imgpath, exc, coll, Pcat, Scat, Att, DiaWtRange, CenStoneRange, CenShape, SShape, CenSetting, Fin, SSNo, Mon, Yr, TotWeight, CenStWeight) + '"class="cart"/> </td>');
t = t + 1;
};
table.append(rowtr);
};
$('#dvContent').append(table);
} catch (e) {
alert(e.message);
}
});
</script>
Html：
这是下拉形状。
当我们选择值＆＃34; Oval＆＃34;时，它会过滤xml数据集并显示那些具有中心形状＆＃34; Oval＆＃34;的记录。同样适用于其他过滤器。
只需根据特定的标记名过滤记录。
<select class="form-control" id="DdlCshape">
<option value=""> Select Center Shape </option>
<option value="Baguette"> Baguette </option>
<option value="Cushion"> Cushion </option>
<option value="Emerald"> Emerald </option>
<option value="Marquise"> Marquise </option>
<option value="Oval"> Oval </option>
<option value="Pear"> Pear </option>
<option value="Princess"> Princess </option>
<option value="Radiant"> Radiant </option>
<option value="Round"> Round </option>
<option value="Tapper"> Tapper </option>
</select>
<select class="form-control" id="DdlCSWeight>
<option value="">Select Center Stone Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
</select>
<select class="form-control" id="DdlWeight_Range">
<option value=""> Select Diamond Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
<option value="1.11 - 1.78 cts">1.11 - 1.78 cts</option>
<option value="1.79 - 2.10 cts">1.79 - 2.10 cts</option>
<option value="2.29 - 2.78 cts">2.29 - 2.78 cts</option>
</select>