Convert checkbox to dropdown using PHP - php

Question

I'm using WP Job Manager plugin, and I want to convert the Job type checkbox into dropdown (the gray background).
I tried to convert it but I have no luck. How to do this using selected() function? Thanks
Here's the snippet that I tried:
<?php if ( ! is_tax( 'job_listing_type' ) && empty( $job_types ) ) : ?>
<ul class="job_types">
<?php foreach ( get_job_listing_types() as $type ) : ?>
<select name="filter_job_type[]">
<option value='Collections' ". selected( $types['collections'], 'collections', false .">Collections</option>
</select>
<?php endforeach; ?>
Here's the snippet of the job type checkbox:
<?php if ( ! is_tax( 'job_listing_type' ) && empty( $job_types ) ) : ?>
<ul class="job_types">
<?php foreach ( get_job_listing_types() as $type ) : ?>
<li>
<label for="job_type_<?php echo $type->slug; ?>" class="<?php echo sanitize_title( $type->name ); ?>">
<input type="checkbox" name="filter_job_type[]" value="<?php echo $type->slug; ?>" <?php checked( in_array( $type->slug, $selected_job_types ), true ); ?> id="job_type_<?php echo $type->slug; ?>" /> <?php echo $type->name; ?>
</label>
</li>
<?php endforeach; ?>
</ul>
<input type="hidden" name="filter_job_type[]" value="" />
<?php elseif ( $job_types ) : ?>
<?php foreach ( $job_types as $job_type ) : ?>
<input type="hidden" name="filter_job_type[]" value="<?php echo sanitize_title( $job_type ); ?>" />
<?php endforeach; ?>
Here's the link: http://bit.ly/1OEzAwz

Answer 1

This might do the trick for you:
<script>
var select=jQuery(document.createElement('select')).insertBefore(jQuery('.load_more_jobs'));
jQuery('.job_listing a').each(function(){
jQuery(document.createElement('option')).appendTo(select).val(this.href).html(jQuery(this).html());
});
jQuery('.entry-content select').on('change',function(){
if(!this.value)return;
console.log(this.options[this.selectedIndex].innerHTML+": "+this.value);
window.location.href=this.value;
});
jQuery('.job_listing').hide();
</script>

Answer 2

You can try this one at the head tag
<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 = $( 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);
</script>