Question

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

我试图获取值，但我的JS无效。

如何正确地做到这一点？

JS：

<select class="form-control" id="deviceModel">
        <option value="">Select a category</option>
        <option *ngFor='let element of category'*ngIf="{{element}}==={{nameDevice}}" value="{{element}}">{{element}}</option>    
    </select>

HTML：

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>

JS下拉列表（第一次下拉列表）

<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>

Answer 1

您可以尝试如下所示的工作代码段，它一定能正常工作

＆＃13;

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

＆＃13;

<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>

＆＃13;

您获取div元素的innerhtml的代码是正确的，但您必须在document.onready内部或外部初始化数组，但onready之外的代码console.log(myArr);将无法在以下2种情况下工作，
案例-1：数组在函数内初始化，console.log在onready函数之外。将抛出错误，说明myArr变量尚未初始化。
案例-2：数组在onready函数和函数外部的console.log之前初始化，然后将显示空数组，因为它将在onready函数之前执行

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

1 个答案: