Page 1 of 1

Change Form Select Options based on other select

Posted: Wed Sep 10, 2014 3:04 pm
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

Re: Change Form Select Options based on other select

Posted: Wed Sep 10, 2014 3:26 pm
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);
			}
		}
	});
});

Re: Change Form Select Options based on other select

Posted: Thu Sep 11, 2014 12:21 am
by pbs

Re: Change Form Select Options based on other select

Posted: Thu Sep 11, 2014 2:11 pm
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>

Re: Change Form Select Options based on other select

Posted: Thu Sep 11, 2014 2:25 pm
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.

Re: Change Form Select Options based on other select

Posted: Thu Sep 11, 2014 4:39 pm
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.