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
Change Form Select Options based on other select
Moderator: General Moderators
Re: Change Form Select Options based on other select
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
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
you can check this example
http://www.phpclasses.org/package/5988- ... rrays.html
http://www.phpclasses.org/package/5988- ... rrays.html
Re: Change Form Select Options based on other select
i used this code and it works. what do you think? is it good, reliable? you see any issues?
formoptions.js
form
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);
}
}
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
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
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.