Javascript 如何使用JS显示所有值？

我正在使用WP作业管理器，并使用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);

（函数（$）{
“严格使用”
$（函数（）{
变量$job\u type\u select=$（''）；
var$job_types_ul=$（'form.job_filters ul.job_types'）；
变量$job\u type\u hidden=$（''）；
$job\u types\u ul.find（'li'）。每个（函数（）{
var$li=$（本）；
var label_text=$li.find（'label'）.text（）；
var value=$li.find（'input:checkbox'）.val（）；
var$期权=$（''）；
$option.text（标签\文本）；
$option.attr（{value:value}）；
$job\u types\u select.append（$option）；
});
$job\u type\u select.change（函数（）{
var值=$（this.val（）；
$（'input:hidden[name=“filter_job_type[]”]）.val（值）；
var target=$（this）.closest（'div.job_listings'）；
triggerHandler（'update_results'，[1，false]）；
});
$job\u type\u ul.after（$job\u type\u hidden）；
$job\u types\u ul.replaceWith（$job\u types\u select）；
);
})（jQuery）；

这个网站上有很多东西，所以你能用相关数据创建一个JSFIDLE吗？我不能创建一个JSFIDLE，因为html是由插件生成的。你能把生成的html DOM和Js/Jquery代码一起复制到JSFIDLE吗？我能，但是输出没有实际效果，这是因为你没有包含css样式您还需要在JSFIDLE上包含jquery框架。