troubleshooting Question
How to use PHP and Javascript to auto select Option value on load?
fwlrichard asked on
Hi,
I'm trying to figure out how to get the dropdown or select option selected on load?
I don't know how to get or pass the values of $country and $state from the index.php into the javascript functions then how do I check if its the right option to set selected as true?
I don't know how or if you can mix javascript and php scripting...
I've tried to make this work for days now...
Just trying to test echo true with php into the function to test. I can't make anything work. I have tried every which way I could think of and then some.... the list goes and goes... ie..
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
This may just be something that has to be set after the fact somehow with something like getElementById...
Thanks
Richard
I'm trying to figure out how to get the dropdown or select option selected on load?
I don't know how to get or pass the values of $country and $state from the index.php into the javascript functions then how do I check if its the right option to set selected as true?
I don't know how or if you can mix javascript and php scripting...
I've tried to make this work for days now...
Just trying to test echo true with php into the function to test. I can't make anything work. I have tried every which way I could think of and then some.... the list goes and goes... ie..
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
This may just be something that has to be set after the fact somehow with something like getElementById...
Thanks
Richard
<?php
// index.php
// Get or load country and state variables
$country = "1"; // For testing set default as country 1
$state = "14"; // For testing set default as state as 14
?>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Auto fill second dropdowns...</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fill_DD1();">
<form name="drop_down" action="index.php" method="POST" >
<SELECT NAME="DD1" onChange="fill_DD2();">
<Option value="">Country</option>
</SELECT>
<SELECT NAME="DD2">
<Option value="">State</option>
</SELECT>
</form>
</body>
</html>
// list.js
// Function is used to fill the first dropdown selectbox on load
function fill_DD1(){
addOption(document.drop_down.DD1, "1", "United States", "false", 'false');
addOption(document.drop_down.DD1, "2", "Canada", "false", "false");
addOption(document.drop_down.DD1, "3", "United Kingdom", "false", "false");
fill_DD2();
}
// ON selection of first dropdown fill the second dropdown
function fill_DD2(){
removeAllOptions(document.drop_down.DD2);
// First remove all options from the second dropdown
addOption(document.drop_down.DD2, "", "Select State", ""); // Add the first option value to second dropdown
// later I would like to get the values from the database or cache file
if(document.drop_down.DD1.value == '1'){
addOption(document.drop_down.DD2,"14", "Alabama", "false", "false");
addOption(document.drop_down.DD2,"15", "Alaska", "false", "false");
addOption(document.drop_down.DD2,"16", "Arizona", "false", "false");
}
if(document.drop_down.DD1.value == '2'){
addOption(document.drop_down.DD2,"2", "Alberta", "false", "false");
addOption(document.drop_down.DD2,"3", "British Columbia", "false", "false");
addOption(document.drop_down.DD2,"4", "Manitoba", "false", "false");
}
if(document.drop_down.DD1.value == '3'){
addOption(document.drop_down.DD2,"1", "London");
}
}
// Function to remove all options from a selectbox
function removeAllOptions(selectbox){
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{selectbox.remove(i);}
}
// function to add options to a selectbox
function addOption(selectbox, value, text, defaultSelected, selected){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
if (selected=="true"){optn.selected = selected;}
selectbox.options.add(optn);
}
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.