title: How to get the values of each option HTML tag?
body: <p>I have a form with dropdown, the dropdown values have a correspoding values too. E.g. If the user choose the option 1 in the dropdown, the values under dropdown will be displayed. Now, I want to get the values of div.position for each option and displayed it in a dropdown too.</p>
  
  <p>I tried to get the values, but my JS is not working.</p>
  
  <p>How to do this correctly?</p>
  
  <p>JS:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $(".job_listings li a div h3").each(function(){
          myArr.push($(this).html());
      });
  });
  console.log(myArr);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select class="job_types_select"&gt;
  &lt;option value="choose-department"&gt;Choose department&lt;/option&gt;
  &lt;option value="facility"&gt;Facility&lt;/option&gt;
  &lt;option value="finance"&gt; Finance&lt;/option&gt;
  &lt;option value="human-resources"&gt;Human Resources&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>HTML Result:</p>
  
  <pre><code>&lt;ul class="job_listings"&gt;
      &lt;li class="job_listing job-type-facility post-7747 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;"&gt;
      &lt;a href="#&gt;
          &lt;img class="company_logo" alt=""&gt;
      &lt;div class="position"&gt;
              &lt;h3&gt;Housekeeping Attendant&lt;/h3&gt;
              &lt;div class="company"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="location"&gt;&lt;/div&gt;
          &lt;ul class="meta"&gt;
              &lt;li class="job-type facility"&gt;Facility&lt;/li&gt;
              &lt;li class="date"&gt;&lt;date&gt;4 months ago&lt;/date&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="job_listing job-type-facility post-7734 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;"&gt;
      &lt;a href="#"&gt;
          &lt;img class="company_logo" alt=""&gt;
          &lt;div class="position"&gt;
              &lt;h3&gt;Liaison Officer&lt;/h3&gt;
              &lt;div class="company"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="location"&gt;&lt;/div&gt;
          &lt;ul class="meta"&gt;
              &lt;li class="job-type facility"&gt;Facility&lt;/li&gt;
              &lt;li class="date"&gt;&lt;date&gt;4 months ago&lt;/date&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS dropdown (1st dropdown)</p>
  
  <pre><code>(function($){
      "use strict"
      jQuery(function(){
          var $job_types_select = $('&lt;select class="job_types_select"&gt;&lt;/select&gt;');
          var $job_types_ul = $('form.job_filters ul.job_types');
          var $job_type_hidden = $('&lt;input type="hidden" name="filter_job_type[]"/&gt;');
              $job_types_ul.find('li').each(function(){
                  var $li = $(this);
                  var label_text = $li.find('label').text();
                  var value = $li.find('input:checkbox').val();
                  var $option = $('&lt;option&gt;&lt;/option&gt;');
                  $option.text(label_text);
                  $option.attr({value: value});
                  $job_types_select.append($option);
              });
                  $job_types_select.change(function(){
                  var value = $(this).val();
                  $('input:hidden[name="filter_job_type[]"]').val(value);
                      var target = $(this).closest('div.job_listings');
                      target.triggerHandler('update_results', [ 1, false ]);
                  });
          $job_types_ul.after($job_type_hidden);
          $job_types_ul.replaceWith($job_types_select);
      });
  })(jQuery);
  </code></pre>