• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3721
  • Last Modified:

Using JQuery and a drop-down Select field to populate multiple text fields

I have a simple drop-down select field in a form which contains 4 other text fields. When a user selects an item from the select list, I want to change the default value in the 4 other fields based on the selected item.
I'd like to do so using JQuery.
The select field is generated on the server from mysql database. I can generate anything necessary in the Javascript.

I was thinking I could generate a Javascript Array containing the necessary data to populate the text fields.
Is this method feasible? Please provide an example.
1 Solution
Albert Van HalenAnalyst developerCommented:
Look at the code.
Perhaps it's working for you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
		<title>DropDownList Populate</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// array list generated on the server
var tbValues = [];
tbValues["1"] = ['The first textbox', '', 'The 3rd', 'Last but not least; the 4th'];
tbValues["2"] = ['The first textbox', 'The second one', 'The 3rd', 'Last but not least; the 4th'];
tbValues["option3"] = ['3 : The first textbox', '3 : The second', '3 : The 3rd', '3 : Last but not least; the 4th'];
tbValues["4"] = ['4 - empty', '4 - The second', '4 - The 3rd', '4 - Last but not least; the 4th'];
function changeDropDownList() {
	var val = $(this).val();
	if (val != "") {
	} else {
		// Clear the textboxes
$(function() {
	// Bind the change event
	$("#myDropDownList").bind("change", changeDropDownList);
		<select id="myDropDownList">
			<option value="">Please select</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="option3">Three</option>
			<option value="4">Four</option>
		<input type="text" id="myTextBox1" />
		<input type="text" id="myTextBox2" />
		<input type="text" id="myTextBox3" />
		<input type="text" id="myTextBox4" />

Open in new window

bhlangAuthor Commented:
First class solution! Thank you very much.
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.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Tackle projects and never again get stuck behind a technical roadblock.
Join Now