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

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是正确的，但你必须初始化数组在document.onready内部或外部，但在以外的代码console.log(myArr);将不能在以下两种情况下工作：
2. case -1：该数组是初始化的函数内部和console.log不在onready函数中。将抛出一个错误，指出myArr变量尚未初始化。
3. 案例-2：数组在onready的功能和作用外的console.log那么空数组会显示，因为它会在onready功能前执行前initalized