How to display all values using JS?

I'm using the WP Job Manager and I customized it using JS. Instead of the input box, I made it as a dropdown.

Now, I want to display all vacancies under of all departments when the user visits the web page.

Here's the link: http://bit.ly/1PsOR18

Here's the snippet:

(function($) {
"use strict"

$(function() {
  var $job_types_select = $('<select class="job_types_select"></select>');
  var $job_types_ul = $('form.job_filters ul.job_types');
  var $job_type_hidden = $('<input type="hidden" name="filter_job_type[]"/>');
  $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 = $('<option></option>');
    $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);

via Chebli Mohamed