hi i want to build a dynamic select box along with submit button. for example in my first select box there is a number of countries. second select contains the number of cities according to the country name. the problm here i am facing i dont know to open the web page of the city that is in the second select box when the submit buuton is pressed. my following code is here please help.
!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" />
<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{
document.formname.subcategory.options.length = 0;
switch (listindex)
{
case "Pakistan" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Islamabad" );
document.formname.subcategory.options[2]=new Option("Rawalpindi");
document.formname.subcategory.options[3]=new Option("Kharachi");
break;
case "United States" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("NewYork");
document.formname.subcategory.options[2]=new Option("Washinghton");
break;
case "India" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Delhi");
document.formname.subcategory.options[2]=new Option("Mumbai");
break;
}
return true;
}
function greeting()
{
var form = document.formname;
var subcategory_value = encodeURI(form.subcategory.options[form.subcategory.selectedIndex].value) ;
var category_value = encodeURI(form.category.options[form.category.selectedIndex].value);
window.location.href="/"+category_value+"/"+subcategory_value;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<form id="formname" name="formname" method="post" action="" onsubmit="greeting()" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="Pakistan">Pakistan</option>
<option value="United States">United States</option>
<option value="India">India</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
<input type="submit" value="submit"/>
</form>
</body>
</html>
usman.ishaque91 0 Newbie Poster
LastMitch
the problm here i am facing i dont know to open the web page of the city that is in the second select box when the submit buuton is pressed. my following code is here please help.
I assume you got this code from here:
http://www.tamilcodes.com/javascript/javascript-dynamic-dependent-drop-down-list-box/
You need a new window for the city.
You need to do something like this:
case "India" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Delhi");
document.formname.subcategory.options[2]=new Option("Mumbai");
jQuery:
$(document).ready(function() {
$('a[rel="nwindow"]').click( function() {
window.open( $(this).attr('href') );
return false;
});
});
html:
<a href="link to city from your case" rel="nwindow">Delhi</a>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.