javascript - Converting check boxes to drop downs with placeholder 1st item (wp job manager) -

firstly though found answer looking in following threat - convert-checkbox-to-dropdown-using-php

however following solution had 1 fatal flaw, when loading page have on of options selected show jobs 1 specific options. if option empty show nothing.

<script> (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   = $( ).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); </script> 

example of problem

is there way edit above solution contain placeholder entry drop down avoid this? or there better solution?