如何获取每个选项HTML标签的值？

Question

我有一个带有dropdown的表单，下拉值也有相应的值。例如，如果用户在下拉列表中选择选项1，则会显示下拉列表中的值。现在，我希望获得每个选项的div.position值，并将其显示在下拉列表中。

我尝试获取值，但我的JS不工作。

如何正确地做到这一点？

JS：

jQuery(document).ready(function($){
    $(".job_listings li a div h3").each(function(){
        myArr.push($(this).html());
    });
});
console.log(myArr);

HTML：

<select class="job_types_select">
<option value="choose-department">Choose department</option>
<option value="facility">Facility</option>
<option value="finance"> Finance</option>
<option value="human-resources">Human Resources</option>
</select>

HTML结果：

<ul class="job_listings">
    <li class="job_listing job-type-facility post-7747 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;">
    <a href="#>
        <img class="company_logo" alt="">
    <div class="position">
            <h3>Housekeeping Attendant</h3>
            <div class="company"></div>
        </div>
        <div class="location"></div>
        <ul class="meta">
            <li class="job-type facility">Facility</li>
            <li class="date"><date>4 months ago</date></li>
        </ul>
    </a>
  </li>
  <li class="job_listing job-type-facility post-7734 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;">
    <a href="#">
        <img class="company_logo" alt="">
        <div class="position">
            <h3>Liaison Officer</h3>
            <div class="company"></div>
        </div>
        <div class="location"></div>
        <ul class="meta">
            <li class="job-type facility">Facility</li>
            <li class="date"><date>4 months ago</date></li>
        </ul>
    </a>
  </li>
</ul>

JS下拉列表(第一个下拉列表)

(function($){
    "use strict"
    jQuery(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);

Answer 1

您可以尝试如下所示的工作代码片段，它肯定会工作

​

$(document).ready(function(){
var myArr=[];
    $(".job_listings li a div h3").each(function(){
        myArr.push($(this).html());
    });
  console.log(myArr);
  console.log("2");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="job_listings">
    <li class="job_listing job-type-facility post-7747 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;">
    <a href="#>
        <img class="company_logo" alt="">
    <div class="position">
            <h3>Housekeeping Attendant</h3>
            <div class="company"></div>
        </div>
        <div class="location"></div>
        <ul class="meta">
            <li class="job-type facility">Facility</li>
            <li class="date"><date>4 months ago</date></li>
        </ul>
    </a>
  </li>
  <li class="job_listing job-type-facility post-7734 type-job_listing status-expired hentry" data-longitude="14.5870923" data-latitude="121.063549" style="visibility: visible;">
    <a href="#">
        <img class="company_logo" alt="">
        <div class="position">
            <h3>Liaison Officer</h3>
            <div class="company"></div>
        </div>
        <div class="location"></div>
        <ul class="meta">
            <li class="job-type facility">Facility</li>
            <li class="date"><date>4 months ago</date></li>
        </ul>
    </a>
  </li>
</ul>

​

1. 您的代码获取document.onready元素的innerhtml是正确的，但是您必须在onready内部或外部初始化数组，但console.log(myArr);外部的代码onready在以下两种情况下将不起作用。
2. Case -1: initialized.
3. Case数组在函数内部初始化，而console.log在onready函数外部，将抛出function.An错误，说明myArr变量尚未初始化-2:数组在onready函数之前初始化，console.log在函数外部初始化，则将显示空数组，因为它将在onready函数

之前执行