How to get the values of each option HTML tag?

Question

I have a form with dropdown, the dropdown values have a correspoding values too. E.g. If the user choose the option 1 in the dropdown, the values under dropdown will be displayed. Now, I want to get the values of div.position for each option and displayed it in a dropdown too.

I tried to get the values, but my JS is not working.

How to do this correctly?

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

<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 dropdown (1st dropdown)

(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);

what do mean by "all values for each option" ?is it like this, Housekeeping Attendant Facility 4 months ago or is it just Housekeeping Attendant to be shown in the next dropdown — GraveyardQueen, Nov 25 '16 at 04:05
No. I want to get the value of div.position for each option values (I updated my question — User014019, Nov 25 '16 at 05:12
yes, even the user not choose any option in the dropdown. I want to get all the values of div.position to all options html — User014019, Nov 25 '16 at 05:32

score 0 · Answer 1 · answered Nov 25 '16 at 06:03

You could try the working snippet as shown below,it will definitely work

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

Your code fetching the innerhtml of the div element is correct,but you have to initialize the array either inside or outside the document.onready but the code console.log(myArr);outside the onready will not work in the following 2 cases,
Case -1: the array is intialized inside the function and the console.log is outside the onready function.An error will be thrown saying that the myArr variable has not been initialized.
Case -2: The array is initalized before the onready function and the console.log outside the function then the empty array will be shown since it will execute before the onready function

it's not working in my side, i getting this: Array[0] – User014019 Nov 25 '16 at 06:13 — User014019, Nov 25 '16 at 06:13

How to get the values of each option HTML tag?

1 Answers1