Hello,
I'm trying to populate 3 drop down exactly the same from each other but select name and option value. I found a simple javascript works fine for my demand; however, unable to make it work once I combo the select list. Below is what I have changed and no longer work correctly when changed. I'm not good with js so any help is appreciated.
I'm trying to populate 3 drop down exactly the same from each other but select name and option value. I found a simple javascript works fine for my demand; however, unable to make it work once I combo the select list. Below is what I have changed and no longer work correctly when changed. I'm not good with js so any help is appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="includes/jquery1.7.js"></script>
<script language="javascript">
$(function() {
var selectValues = {
"nokia": {
"N97": "[URL unfurl="true"]http://www.google.com",[/URL]
"N93": "[URL unfurl="true"]http://www.stackoverflow.com"[/URL]
},
"motorola": {
"M1": "[URL unfurl="true"]http://www.ebay.com",[/URL]
"M2": "[URL unfurl="true"]http://www.twitter.com"[/URL]
}
};
for (var i=1;i<4;i++) {
var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);
}
$vendor.change(function() {
$model.empty().append(function() {
var output = '';
$.each(selectValues[$vendor.val()], function(key, value) {
output += '<option value='+value+'>' + key + '</option>';
});
return output;
});
}).change();
});
</script>
<style type="text/css">
#download-link {
padding: 13px 15px 13px 15px;
font-size: larger;
font-decoration: underline;
background-color: #ffffbb;
border: 2px dashed red;
margin-top: 16px;
display: inline-block;
}
</style>
</head>
<body>
<p>
<form action="?" method="get">
<%for i=1 to 3%>
<select name="dvr_<%=i%>" class="mobile-vendor<%=i%>">
<option value="motorola">Motorola</option>
<option value="nokia">Nokia</option>
<option value="android">Android</option>
</select>
<select name="cam_<%=i%>" class="model<%=i%>">
<option></option>
</select>
<BR />
<%next%>
<input type="submit" value="submit" />
</form>
</p>
</body>
</html>