i have created a DYNAMIC DROPDOWNLIST DDL2 which is linked to DDL1 by script tag.i want the options of ddl2 to open some pages when clicked on and submit button is pressed. ddl1 consists of 5 states and ddl2 consists of location of those states connected dynamically. below that i also have one more ddl which ive successfully linked because it is not a dynamically linked dropdown list. can some one please tell me the code for linking the ddl2 i.e goa asf,goa lpg ro etc list to pages? the codes are shown below:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> STATES</TITLE>
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var goa = ['GOA ASF', 'Goa LPG Plant'];
var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT''WADALA I TERMINAL'];
var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'];
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'];
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];
switch (ddl1.value) {
case 'Goa':
ddl2.options.length = 0;
for (i = 0; i < goa.length; i++) {
createOption(ddl2, goa[i],goa[i]);
}
break;
case 'Maharashtra':
ddl2.options.length = 0;
for (i = 0; i < maharashtra.length; i++) {
createOption(ddl2, maharashtra[i],maharashtra[i]);
}
break;
case 'Rajasthan':
ddl2.options.length = 0;
for (i = 0; i < rajasthan.length; i++) {
createOption(ddl2, rajasthan[i],rajasthan[i]);
}
break;
case 'Gujrat':
ddl2.options.length = 0;
for (i = 0; i < gujrat.length; i++) {
createOption(ddl2, gujrat[i],gujrat[i]);
}
break;
case 'MadhyaPradesh':
ddl2.options.length = 0;
for (i = 0; i < madhyapradesh.length; i++) {
createOption(ddl2, madhyapradesh[i],madhyapradesh[i])
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</HEAD>
<BODY>
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Goa">Goa</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
<option value="MadhyaPradesh">MadhyaPradesh</option>
</select>
<select id="ddl2">
</select><br>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An ASSET:</H1>
<form id="link">
<select multiple="multiple" size="1">
<option value="http://stackoverflow.com/">4GB RAM PC- Lot 500 HCL</option>
<option value="http://google.com/">4GB RAM PC- Lot 450 HCL</option>
<option value="http://yahoo.com/">HD 245 Gold Lot 50</option>
<option value="http://bing.com/">Marathon 255 (40)</option>
<option value="http://php.net/">Wep HQ 2100 (20)</option>
<option value="ADF Scanner (45)">ADF Scanner (45)</option>
</select><BR>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; ">
</form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('#link').on('submit', function (e) {
e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
</script>
</BODY>
</HTML>
The code given above is my whole pages code. also i have recieved this code for linking it but it does not work. i dont know why. please help me with a code if u know. or tell me the changes that i will have to do in the code given below so that it works.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> STATES</TITLE>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
allLinks= {goa:{0:"google.com",1:"www.gmail.com"},
maharashtra :
{0:'www.yahoo.com',1:"www.microsoft.com",2:"www.apple.com"},
rajasthan :
{0:'www.stackoverflow.com',1:'www.cnn.com',2:'www.nasa.gov'}
}
function configureDropDownLists(ddl1,ddl2) {
var goa = ['GOA ASF', 'Goa LPG Plant', ];
var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG
PLANT','WADALA I TERMINAL'];
var rajasthan = ['AJMER LPG PLANT ','AJMER
TERMINAL','UDAIPUR RRO'];
var gujrat = ['AHMEDABAD NWZ LPG ','AHMEDABAD NWZ RETAIL','VADODARA IRD '];
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];
switch (ddl1.value) {
case 'goa':
ddl2.options.length = 0;
for (i = 0; i < goa.length; i++) {
createOption(ddl2, goa[i],i);
}
break;
case 'maharashtra':
ddl2.options.length = 0;
case 'maharashtra':
ddl2.options.length = 0;
for (i = 0; i < maharashtra.length; i++) {
createOption(ddl2, maharashtra[i],i);
}
break;
case 'rajasthan':
ddl2.options.length = 0;
for (i = 0; i < rajasthan.length; i++) {
createOption(ddl2, rajasthan[i],i);
}
break;
case 'gujrat':
ddl2.options.length = 0;
for (i = 0; i < gujrat.length; i++) {
createOption(ddl2, gujrat[i],i);
}
break;
case 'madhyapradesh':
ddl2.options.length = 0;
for (i = 0; i < madhyapradesh.length; i++) {
createOption(ddl2, madhyapradesh[i],i);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
$(document).ready(function(){
$('#link').on('submit', function (e) {
e.preventDefault();
alert('submited, opening link');
var $form = $(this);
$select1 = $form.find('select#ddl1').val(); //state
$select2 = $form.find('select#ddl2').val(); //city
window.open('http://'+allLinks[$select1][$select2]);
});
});
</script>
</head>
<BODY>
<div id='link'>
<form>
<select id="ddl1"
onchange="configureDropDownLists(this,document.getElemen
tById('ddl2'))">
<option value=""></option>
<option value="goa">Goa</option>
<option value="maharashtra">Maharashtra</option>
<option value="rajasthan">Rajasthan</option>
<select id="ddl2">
</select><br>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
</body>
</html>