We help IT Professionals succeed at work.
Get Started

How to append jQuery AJAX results in the form of <options> for my form?

evibesmusic
evibesmusic asked
on
459 Views
Last Modified: 2014-08-16
Experts,

I am attempting to build my form dynamically based on what a user selects.

How can I append the results of my query as <option></option> tags to my second select?

My query is executing perfectly and returns a result but, I am unsure about the <option> portion of this task.

<script type="text/javascript">
$(document).ready(function() {
	$("#JobSite").change(function() {
		// SHOW LOADING IMAGE
		$('.loading_image_sm').show();
		$("#JobDepartment").load("./scripts/test.php?ajax_post=get_department", { value: $(this).val() }, 
			function() {
				//HIDE LOADING IMAGE WHEN QUERY COMPLETED SUCCESSFULLY
				$('.loading_image_sm').hide();			
				var items = [];
				$.each(data, function( key, val ) {
					items.push( "<option value='" + val + "'>" + val + "</option>" );
				});
				$( "#JobDepartments").append(items);
			}
		);
	});
});
</script>

Open in new window


<table cellpadding="2" cellspacing="2" border="0" width="100%">
    <tr>
        <td><b>Site Name: </b></td>
        <td>
            <select id="JobSite">
            <?php
                while($distinct_site = mysql_fetch_array($get_site_query)){
                    echo'<option value="'.$distinct_site['JobSite'].'">'.$distinct_site['JobSite'].'</option>';
                }
            ?>
            </select>
        </td>
    </tr>                
    <tr>
        <td><b>Department Name: </b></td>
        <td>
            <select id="JobDepartment">
                <?php echo $job_department; ?>
            </select>
            <img src="./images/ajax-loader_sm.gif" class="loading_image_sm" />
        </td>
    </tr>
</table>

Open in new window


test.php
		$job_department_sql = "SELECT DISTINCT JobDepartment FROM jobs WHERE JobSite='".$_POST['value']."' ORDER by JobDepartment ASC";
		$job_department_query = mysql_query($job_department_sql) or die ("Could not run query: " . $job_department_sql . "<br />\n" . mysql_error () );
		while($job_department = mysql_fetch_array($job_department_query)){			
			$departments[] = array("JobDepartment"=>$job_department['JobDepartment']);
		}
	//SEND AUTO-SUGGESTION BOX DATA IN A JSON FORMAT
	echo json_encode($departments);

Open in new window

Comment
Watch Question
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE