Here I have two HTML pages, First_page.html and Second_page.html,
In First_page.html I have a code that redirects to a page when a link is clicked with a certain URL parameter.
First_page.html's code is like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="Second_page.html?=1">one</a><br />
<a href="Second_page.html?=2">two</a><br />
<a href="Second_page.html?=3">three</a><br />
<a href="Second_page.html?=4">four</a>
</body>
</html>
And in the Second_page.html I have a code that reads the URL parameter and change the Dropdowns Menu according to it.
Second_Page.html's code is like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function show(choice) {
var success = -1;
for (var i=0; i < document.form1.selecoption.length; i++) {
if (document.form1.selecoption.options[i].value == choice)
success = [i];
}
document.form1.selecoption.selectedIndex=success;
}
</script>
</head>
<body onLoad="var choice = location.href.split('?')[1].split('=')[1];show(choice);">
<form name="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
Now, what I want is that how do i select two different dropdown menu's i.e "selecoption" & "selecsecondoption" in Second_page.html using URL Parameter.
First, you have to use the correct URL format. Passing value(s) to URL needs corresponding variable name(s). So the corrected First_page.html file should be like below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="Second_page.html?selecoption=1">one</a><br />
<a href="Second_page.html?selecoption=2">two</a><br />
<a href="Second_page.html?selecoption=3">three</a><br />
<a href="Second_page.html?selecoption=4">four</a>
</body>
</html>
And here's the fixed Second_Page.html file. All script code are moved into the script code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function getUrlVar(varName) { //returns empty string if variable name not found in URL
if (!varName) return ''; //no variable name specified. exit and return empty string
varName = varName.toLowerCase(); //convert to lowercase
var params = location.search; //get URL
if (params == '') return ''; //no variables at all. exit and return empty string
var vars = params.split('?')[1].split('&'); //get list of variable+value strings
for (var i = 0; i < vars.length; i++) { //check each variable
var varPair = vars[i].split('='); //split variable and its value
if (varPair.length > 1) { //has "=" separator
if (varPair[0].toLowerCase() == varName) { //same variable name?
return varPair[1]; //found variable. exit and return its value
} //else: check next variable, if any
} //else: is not an array. i.e.: invalid URL variable+value format. ignore it
}
return ''; //no matching variable found. exit and return empty string
}
function show() {
var value = getUrlVar('selecoption'); //get variable value
if (!value) return; //variable not found
if (parseInt(value) == NaN) return; //value is not a number
var sel = document.getElementById('form1').selecoption;
for (var i=0; i < sel.length; i++) {
if (sel.options[i].value == value) {
document.getElementById('form1').selecoption.value = value;
return;
}
}
}
</script>
</head>
<body onLoad="show();">
<form id="form1">
<select name="selecoption">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
</select>
</form>
</body>
</html>