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

Question

我有一个带下拉菜单的窗体，下拉菜单值也具有相应的值。 例如，如果用户在下拉菜单中选择选项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. 您获取div元素的innerhtml的代码是正确的，但是您必须在文档内部或外部初始化数组console.log(myArr);但代码为console.log(myArr); 在以下两种情况下，onready之外的功能将不起作用，
2. 情况-1：数组被初始化为函数内部，而console.log位于onready函数外部，将抛出一个错误，提示myArr变量尚未初始化。
3. 情况-2：该数组在onready函数和该函数之外的console.log之前被初始化，然后将显示空数组，因为它将在onready函数之前执行