Change Form Select Options based on other select

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Change Form Select Options based on other select

Post by donny »

hello,

can somebody please point me into the right direction with this.

i have a form with select fields on it and multiple options.
i want to be able to change the options that show up under certain select fields depending on what a user selected in a previous one..

like if he selected 1 on the initial select then a different option that i have will show all options for 1 .. if he selected 2 then it'll show all options for 2.

thanks
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Change Form Select Options based on other select

Post by requinix »

Do you need something complicated? Or are there many, many different possible options for each previous field? If so then AJAX is probably your best bet.
If it doesn't need to be complicated and you're not dealing with many (like, potentially hundreds) of total possible options, then straight Javascript that shows/hides the relevant options would be easier.

Assuming AJAX, since you're talking about multiple fields and options,

1. Acquaint yourself with AJAX and how to use it within your Javascript framework
2. Make a PHP script that outputs JSON for the various options, and takes as input whatever information it needs to determine that
3. Make your Javascript call the PHP script (with the right data). When the AJAX returns it
3a. Removes all the current options,
3b. Loops over all the new options, and
3c. Adds them to the SELECT

With jQuery it looks something like

Code: Select all

<?php

$id = (int)$_GET["id"];
$options = database_query("SELECT value, label FROM table_with_options WHERE id = {$id}");
// array(
//   0 => array("value" => "...", "label" => "..."),
//   ...
// )

header("Content-Type: application/json");
echo json_encode($options);
// [{"value":"...","label":"..."},...]

Code: Select all

<select id="select123" class="input-parent" data-child="child123">
	<option value="1">Parent 1</option>
	<option value="2">Parent 2</option>
	<option value="3">Parent 3</option>
</select>
<select id="child123" class="input-child" data-parent="select123">
	<option value="">Choose a parent</option>
</select>

Code: Select all

$("select.input-parent").change(function() {
	var p = $(this);
	var c = $("#" + p.attr("data-child"));
	$.ajax("/path/to/script.php", {
		data: {
			id: p.val()
		},
		success: function(data) {
			c.empty();
			for (var i = 0; i < data.length; i++) {
				var o = $("<option></option>");
				o.val(data[i].value);
				o.text(data[i].label);
				c.append(o);
			}
		}
	});
});
pbs
Forum Contributor
Posts: 230
Joined: Fri Nov 07, 2008 5:31 am
Location: Nashik, India
Contact:

Re: Change Form Select Options based on other select

Post by pbs »

donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Change Form Select Options based on other select

Post by donny »

i used this code and it works. what do you think? is it good, reliable? you see any issues?

formoptions.js

Code: Select all

function populate(s1,s2){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	s2.innerHTML = "";
	if(s1.value == "Chevy"){
		var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
	} else if(s1.value == "Dodge"){
		var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
	} else if(s1.value == "Ford"){
		var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
	}
	for(var option in optionArray){
		var pair = optionArray[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s2.options.add(newOption);
	}
}
form

Code: Select all

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="formoptions.js"></script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Change Form Select Options based on other select

Post by Celauran »

It's all hard coded, which makes it pretty rigid. Assuming your app is database-driven, I'd opt for an AJAX callback on change to populate the second list.
donny
Forum Contributor
Posts: 179
Joined: Mon Aug 11, 2014 11:18 am

Re: Change Form Select Options based on other select

Post by donny »

im not going to have more than 5 different if statements. and only like 2 options for each one so its not a lot of stuff that i am doing.
Post Reply