如何获取每个选项 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

你可以试试如下图的sn-p，一定会成功

$(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 的代码是正确的，但您必须在 document.onready 内部或外部初始化数组，但 onready 外部的代码console.log(myArr);在以下两种情况下将不起作用，李>
2. 案例-1：数组在函数内部初始化，console.log在onready函数外部，会抛出myArr变量未初始化的错误。
3. 案例-2：数组在onready函数之前初始化，函数外的console.log然后会显示空数组，因为它会在onready函数之前执行