Need help finding a simple Javascript code.

abcde · Jan 9, 2011

I am working on a submit form with 2 combo-boxes. But I want the result on box 2 to be based on what submitters select from box 1.

ex: If I select "Japanese Cars" from box 1, then I want to see "Toyota, Honda, Nissan.." on box number 2. If i select "American Car" from box 1, then i wanna see "Ford, Chevy, Cadillac.." on box 2.

I now we can only do this with javascript, ajax or something but I cant seem to find them on google.

Can somebody please help?

I'll send you 200 $NP if the code works. Thanks

baxter · Jan 9, 2011

Assuming use of jQuery framework, jquery.com.

Totally untested, not interested in the $NP but should give you a starting point.

Code:

var form = $('#yourformid');
var select1 = $('#your1stselectid');
var select2 = $('#your2ndselectid');

var options = {
  japan: ['Toyota','Honda','Nissan'],
  american: ['Ford','Chevy','Cadillac']
};

select1.change(function() {
   if (undefined != options[this.value]) {
      select2.children().remove();
      $.each(options[this.value],function(car) {
         $('option', {
            name: car.toLowerCase(),
            value: car
         }).appentTo(select2);
      });
   }
});

abcde · Jan 9, 2011

Can you please write that code above with a simple form? I don't know how to make it work.

Skeeter · Jan 9, 2011

What programming language and framework are you using? Assuming since NP isn't .net centric you are using PHP. If you are by chance using vb.net or c#.net let me know and I can provide some code. I am not a php guy but I can tell you that to do this right you need to implement AJAX postbacks. good luck

un4given[MAD] · Jan 10, 2011

This is very simple (and not so perfect) example, but it should give you a clue. There is no need to use jQuery or any other framework for solving such a simple task.

All you need is to initialize arrays groups and cars. If you have any questions, please feel free to ask

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example</title>
<script type="text/javascript">

groups = [
//	 id   name
	["0", "Japanese Cars"],
	["1", "American Cars"]	//please note, that you don't need a comma in this line (last)
];

cars = [
//	 name1     name2    name3 ...
	["Toyota", "Honda", "Nissan"],	//0
	["Ford", "Chevy", "Cadillac"]	//1
];

function _e(objID)
{
	return document.getElementById(objID);
}

function clearSelect(select)
{
	for (var i=select.options.length-1; i >= 0; i--)
	{
		select.remove(i);
	}
}

function addSelectOption(parent, text, value)
{
	var newOption = document.createElement("option");
	newOption.appendChild(document.createTextNode(text));
	newOption.setAttribute("value", value);

	parent.appendChild(newOption);
}

function buildGroupsList()
{
	var s = _e('group');
	clearSelect(s);

	for (var i=0; i<groups.length; i++)
	{
		addSelectOption(s, groups[i][1], groups[i][0]);
	}
}

function buildCarsList()
{
	var group = _e('group').value;
	var s = _e('car');
	clearSelect(s);

	for (var i=0; i<cars[group].length; i++)
	{
		addSelectOption(s, cars[group][i], cars[group][i]);
	}

}

function initForm()
{
	buildGroupsList();
	buildCarsList();
}

</script>
</head>

<body onLoad="initForm();">

<form name="example" id="example" action="" method="post">

<select id="group" name="group" onChange="buildCarsList()">
</select><br />
<select id="car" name="car">
</select><br />
<input type="submit" value="submit!">

</form>
</body>
</html>

abcde · Jan 10, 2011

Thanks!! It works wonder.

baxter · Jan 10, 2011

@un4given[MAD] I agree its just been so long since I've used pure js that it would have been more of a choire then a simple write up.

Cheers,

Jay

Need help finding a simple Javascript code.

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Similar threads

We're social

WeekdayDeal.com

IdealHealthPlan.com

raz.gr

glevon.com

402plumbing.com

DirectHost.Xyz

AbundantInvestment.com

GynoidWife.com

Melodic.io

LoyalSpa.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling