[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2010-01-02
1
Medium Priority
?
332 Views
Last Modified: 2012-05-08
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

0
Comment
Question by:lexusgs430
1 Comment
 
LVL 1

Accepted Solution

by:
Blue-hit earned 2000 total points
ID: 26163364
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question