easy jquery question, populating a select menu from data in an h3

so I have data in h3 fields with a particular class, Id like to get the data inside those H3 tags and populate a select menu with the text found in the h3 fields. <h3 class="example"> fields.

Can someone show me how to on load, after selecting the h3 fields, store their values as an array or whatever I have to do, to then populate the select menu with their contained values?

Any help is much appreciated.
<select id="filterDept">
</select>
<h3 class="example">value 1</h3>
<h3 class="example">value 2</h3>
<h3 class="example">value 3</h3>
<h3 class="example">value 4</h3>

Open in new window

lexusgs430Asked:
Who is Participating?
 
Blue-hitConnect With a Mentor Commented:
You should utilize jQeury each (http://docs.jquery.com/Utilities/jQuery.each):

        jQuery.each($("h3.example"),function(i,val){
          $("#filterDept").append("<option>"+$(val).text()+"</option>");
        });

For full example see attached code
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        jQuery.each($("h3.example"),function(i,val){
          $("#filterDept").append("<option>"+$(val).text()+"</option>");
        });
      });  
    </script>
  </head>
  <body>
    <select id="filterDept">
    </select>
    <h3 class="example">value 1</h3>
    <h3 class="example">value 2</h3>
    <h3 class="example">value 3</h3>
    <h3 class="example">value 4</h3>
  </body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.