如何使用JS将输入复选框替换为下拉列表？

Question

我有一个带有复选框的表单，默认情况下，所有复选框都已选中，现在我想将其转换为下拉列表并保持默认设置，如复选框中所示。因此值仍会自动显示。

我有一个js脚本将其转换为下拉列表，但删除了复选框的默认设置。

JS

(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); 

这里是链接：http://bit.do/bLNZx