如何在javascript中基于下拉选择从XML数据集中提取特定记录_Javascript_Html_Asp.net_Xml

如何在javascript中基于下拉选择从XML数据集中提取特定记录

javascript html asp.net xml

如何在javascript中基于下拉选择从XML数据集中提取特定记录,javascript,html,asp.net,xml,Javascript,Html,Asp.net,Xml,XML文件： ss.xml xml文件中有12k条记录 <record id="R1"> <Imgpath>GR8138K-SS.jpg</Imgpath> <Exclusives> </Exclusives> <Collection> </Collection> <ProductCategory>Mens Ring</ProductCategory> <SubCategory&g

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>



款式编号：“+SSNo+”
产品：“+Pcat+”
类别：“+Scat+”
中心石材重量：“+CenStWeight+”
总重：“+Totwweight+”
；
t=t+1；
};
表.append（rowtr）；
};
$（'#dvContent'）。追加（表）；
}捕获（e）{
警报（e.message）；
}
});

Html:

这是下拉形状

当我们选择值“Oval”时，它过滤xml数据集并显示那些中心形状为“Oval”的记录。对于其他过滤器也是如此

只需根据特定标记名筛选记录

  <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>


选择中心形状
面包
坐垫
翡翠的
侯爵夫人
椭圆形
梨
公主
容光焕发的
圆形的
攻丝机
        <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>