title: How to Search Data in XML based on multiple search criteria defined by HTML Multi selection Dropdown using JQuery
body: <p>I have an application under development with the following scenario</p>
  
  <p>There are 4 multi-select dropdowns:</p>
  
  <ol>
  <li>DropDown1: Market Offering, which has <code>&lt;option&gt;</code>'s as SS, IE and HIX</li>
  <li>DropDown2: Technology, which has values based on the optgroup i.e Application is the optgroup label and then its corresponding values e.g Java, Java EE. There are 4 such optgroups </li>
  <li>DropDown3: Business Process - Specific to the business scenario but again list of select options</li>
  <li>DropDown4: Project Scope : This too has multiple options which the user can select.</li>
  </ol>
  
  <p>The user can select multiple values from the dropdowns above, none of them are mandatory and then click on Search Button</p>
  
  <p>These values are used to search inside an xml file(DataSets.xml, given below) and the response should be Array of <code>&lt;State&gt;</code> elements within a given <code>&lt;DataSet&gt;</code>, If there are multiple <code>&lt;DataSet&gt;</code> elements that match the query, the resultant array should contain all of the <code>&lt;State&gt;</code> element values:</p>
  
  <pre><code>&lt;DataSets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file://DataSets.xsd"&gt;
       &lt;DataSet&gt;
             &lt;MarketOffering&gt;IE&lt;/MarketOffering&gt;
             &lt;Technology&gt;
                   &lt;Application&gt;J2EE&lt;/Application&gt;
                   &lt;Database&gt;Oracle&lt;/Database&gt;
                   &lt;Middleware&gt;MuleESB&lt;/Middleware&gt;
                   &lt;Reporting&gt;Crystal Reports&lt;/Reporting&gt;
                   &lt;Correspondence&gt;HPEx&lt;/Correspondence&gt;
                   &lt;RulesEngine&gt;Corticon&lt;/RulesEngine&gt;
             &lt;/Technology&gt;
             &lt;BizProcess&gt;Registration&lt;/BizProcess&gt;
             &lt;ProjectScope&gt;SNAP&lt;/ProjectScope&gt;
             &lt;State&gt;MT&lt;/State&gt;
             &lt;State&gt;RI&lt;/State&gt;
       &lt;/DataSet&gt;
        &lt;DataSet&gt;
             &lt;MarketOffering&gt;SS&lt;/MarketOffering&gt;
             &lt;Technology&gt;
                   &lt;Application&gt;.NET&lt;/Application&gt;
                   &lt;Database&gt;Oracle&lt;/Database&gt;
                   &lt;Middleware&gt;MuleESB&lt;/Middleware&gt;
                   &lt;Reporting&gt;CrystalReports&lt;/Reporting&gt;
                   &lt;Correspondence&gt;HPEx&lt;/Correspondence&gt;
                   &lt;RulesEngine&gt;Corticon&lt;/RulesEngine&gt;
             &lt;/Technology&gt;
             &lt;BizProcess&gt;Registration&lt;/BizProcess&gt;
             &lt;ProjectScope&gt;SNAP&lt;/ProjectScope&gt;
             &lt;State&gt;SD&lt;/State&gt;
             &lt;State&gt;AZ&lt;/State&gt;
       &lt;/DataSet&gt;
  &lt;/DataSets&gt;
  </code></pre>
  
  <p>The condition of filtering is:</p>
  
  <ol>
  <li><p>Options selected within the dropdown has a "OR" condition i.e if either of the values given in the dropdown e.g MarketOffering i.e SS, IE or HIX is found in the XML, its a match. </p></li>
  <li><p>Criteria across dropdown becomes AND condition i.e MarketOffering as 'IE' AND Technology as 'J2EE' and ProjectScope as 'SNAP'</p></li>
  </ol>
  
  <p>Following is the JQuery which I have written(Pretty naive I know, this is what happens when a Java Developer writes jQuery... :-)) uptil now but this isnt achieving all that I require. Can someone please help me in solving this riddle:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
  
          $(".searchLink").click(function () {
  
              var solutionTypeArray = [];
              $('#solutionType option:selected').each(function (i, selected) {
                  solutionTypeArray[i] = $(selected).val();
              });
  
              var applicationTypeArray = [];
              var databaseTypeArray = [];
              var middlewareArray = [];
              var correspondenceArray = [];
              var reportingArray = [];
              var rulesArray = [];
  
              $('#technology option:selected').each(function (i, selected) {
  
                  if ($(selected).parent().prop('label') == 'Application') {
                      applicationTypeArray[i] = $(selected).val();
                  } else if ($(selected).parent().prop('label') == 'Database') {
                      databaseTypeArray[i] = $(selected).val();
                  } else if ($(selected).parent().prop('label') == 'Middleware') {
                      middlewareArray[i] = $(selected).val();
                  } else if ($(selected).parent().prop('label') == 'Reporting') {
                      reportingArray[i] = $(selected).val();
                  } else if ($(selected).parent().prop('label') == 'Correspondence') {
                      correspondenceArray[i] = $(selected).val();
                  } else if ($(selected).parent().prop('label') == 'Rules Engine') {
                      rulesArray[i] = $(selected).val();
                  }
              });
  
              var bizProcessArray = [];
              $('#bizProcesses option:selected').each(function (i, selected) {
                  bizProcessArray[i] = $(selected).val();
              });
  
              var projectScopeArray = [];
              $('#projectScope option:selected').each(function (i, selected) {
                  projectScopeArray[i] = $(selected).val();
              });
  
              $.ajax({
                  type: "GET",
                  url: "DataSets.xml",
                  dataType: "xml",
                  success: function (xml) {
                      //Read the DataSet element and find the children's value to compare with HTML values
                      var $dataset = $(xml).find("DataSet");
  
                      $dataset.each(function () {
  
                          var marketOfferingFlag = false;
                          $dataset.find("MarketOffering").each(function () {
                              if ($.inArray($(this).text(), solutionTypeArray) != -1) {
                                  marketOfferingFlag = true;
                              }
                          });
  
                          var bizProcessFlag = false;
                          $dataset.find("BizProcess").each(function () {
                              if ($.inArray($(this).text(), bizProcessArray) != -1) {
                                  bizProcessFlag = true;
                              }
                          });
  
                          var projectScopeFlag = false;
                          $dataset.find("ProjectScope").each(function () {
                              if ($.inArray($(this).text(), projectScopeArray) != -1) {
                                  projectScopeFlag = true;
                              }
                          });
  
                          var applicationTypeFlag = false;
                          $dataset.find("Application").each(function () {
                              if ($.inArray($(this).text(), applicationTypeArray) != -1) {
                                  applicationTypeFlag = true;
                              }
                          });
  
                          var databaseTypeFlag = false;
                          $dataset.find("Database").each(function () {
                              if ($.inArray($(this).text(), databaseTypeArray) != -1) {
                                  databaseTypeFlag = true;
                              }
                          });
  
                          var middelWareFlag = false;
                          $dataset.find("Middleware").each(function () {
                              if ($.inArray($(this).text(), middlewareArray) != -1) {
                                  middelWareFlag = true;
                              }
                          });
  
                          var correspondenceFlag = false;
                          $dataset.find("Correspondence").each(function () {
                              if ($.inArray($(this).text(), correspondenceArray) != -1) {
                                  correspondenceFlag = true;
                              }
                          });
  
                          var reportingFlag = false;
                          $dataset.find("Reporting").each(function () {
                              if ($.inArray($(this).text(), reportingArray) != -1) {
                                  reportingFlag = true;
                              }
                          });
  
                          var rulesFlag = false;
                          $dataset.find("RulesEngine").each(function () {
                              if ($.inArray($(this).text(), rulesArray) != -1) {
                                  rulesFlag = true;
                              }
                          });
  
                          if (marketOfferingFlag || bizProcessFlag || projectScopeFlag || applicationTypeFlag
                                 || databaseTypeFlag || rulesFlag || correspondenceFlag || reportingFlag || middelWareFlag) {
  
                              var array = $dataset.find("State").map(function () {
                                  return $(this).text();
                              }).get();
  
                              alert(array)
                          }
  
                      });
                  },
                  error: function () {
                      alert("XML File : DataSets.xml cannot be loaded successfuly. Please check the path and try again.");
                  }
              });
  
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Hope someone would be able to help me out.</p>
  
  <p>Thanks</p>
  
  <p>Edit: Providing the snapshot of the exact requirement:</p>
  
  <p><img src="https://i.stack.imgur.com/BmwDM.png" alt="enter image description here"></p>