title: Returning an Object from an Event Handler, when data can not be Structured to a different format
body: <p>What I want is that when I select a category in dropdown <code>Type</code>, my second dropdown <code>Item</code> should get dynamically updated, on the change event of <code>Type</code>.</p>
  
  <p>If I will be able to <strong>access the Array</strong> I have created inside the change event, I will be able to get the exact values in my second dropdown.</p>
  
  <p>But I'm not sure how to extract the values from there.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
  var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];
  
  var select = document.getElementById("jqfrt");
  
  for (var i = 0; i &lt; type.length; i++) {
    var opt = type[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
  };
  
  $('#jqfrt').change(function(event, informationObj) {
    var selectedValue = $("#jqfrt").val();
    var itemsnew = [];
    for (var i = 0; i &lt; type.length; i++) {
      if (selectedValue == type[i]) {
        itemsnew.push(item[i]);
      };
    };
    console.log(itemsnew);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;select name="jqfrt" id="jqfrt"&gt;&lt;/select&gt;
  &lt;select name="jqitm" id="jqitm"&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm slightly new to JavaScript a simple help will be appreciated! Thanks.</p>