Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamic select option list

Status
Not open for further replies.

cumap

IS-IT--Management
Jul 9, 2007
268
US
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.
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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top