title: Cascading dropdown, pass <option> value as ID
body: <p>I have been building a jQuery based cascading dropdown, using the solution found here <a href="https://stackoverflow.com/questions/34834906/cascading-dropdown-on-javascript">LINK</a>:
  Javascript:</p>
  
  <pre><code>jQuery(function($) {
      var locations = {
          'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
          'Spain': ['Barcelona'],
          ...
      }
  
      var $locations = $('#location');
      $('#country').change(function () {
          var country = $(this).val(), lcns = locations[country] || [];
  
          var html = $.map(lcns, function(lcn) {
              return '&lt;option value="' + lcn + '"&gt;' + lcn + '&lt;/option&gt;'
          }).join('');
  
          $locations.html(html)
      });
  });
  </code></pre>
  
  <p>This works great, however I need to pass an ID of the city, not the city name itself. I've figured out how to add a key to a value ( I am less than noob when it comes to JS ):</p>
  
  <p>Javascript:</p>
  
  <pre><code>var locations = {
      'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
      'Spain': { 4 : 'Barcelona', 15 : 'Madrid', 21 : 'Marabella'],
      ...
  }
  </code></pre>
  
  <p>Question is: how do I pass that id onto the <code>&lt;option&gt;</code> value...?</p>
  
  <p>Javascript:</p>
  
  <pre><code>return '&lt;option value="' + lcn + '"&gt;' + lcn + '&lt;/option&gt;'
  </code></pre>