Question

I have 2 drop downs. In the first one you choose a model, in the second a specific model.
http://jsfiddle.net/QskM9/

For example:

drop down 1: 
Nokia 
Samsung
Apple -if this is selected, the second drop down shows:

Drop down 2:
iPhone 3
iPhone 3Gs
iPhone 4 -When this is selected, go to www.apple.com (for example)

I’ve been trying this the whole day and cant seem to make this work.
This is what I’ve got so far:

// HTML
<form method="get" name="box">
<select id="opsaetning" name="opsaetning" onchange="changelist(this)">
<option selected="selected">Model</option> 
<option label="Apple">Apple</option>
<option label="Nokia">Nokia</option>
<option label="Samsung">Samsung</option>
 </select>

 <select id="model" name="model" onchange="document.location=$(this).val();">
<option value="www.apple.com" selected="selected">iphone 4</option> 
 </select>
 </form>

//SCRIPT
<script type="text/javascript" language="javascript">
        var lists = new Array();
        // Apple
        lists['Apple'] = new Array();
        lists['Apple'][0] = new Array(
        'Forbered Gmail til mobilen');

        lists['Apple'] = new Array(
        'www.apple.com/ihphone3g',
        'www.apple.com/iphone4');

        function changelist(){
        list = lists[box.options[box.selectedIndex].value];
        sletListe(box.form.model);
        fyldListe(box.form.model, list);
        }

        function sletListe(box){
        while(box.options.length)box.options[0] = null;
        }

        function fyldListe(box, lists){
            for(i=0; i< arr[0].length; i++){
                option = new Option(arr[0][i], arr[l][i]);
                box.options[box.length] = option;
            }
            box.selectedIndex=0;
        }
</script>

Can anyone help me get it working? Note I can’t use PHP, .NET, Perl etc. only HTML and js/jq.

Answer 1

give this a try:

var options = {
    "Apple" : {
        'ihphone3g': 'http://www.apple.com/ihphone3g',
        'iphone4': 'http://www.apple.com/iphone4'
    }
}
function changelist(v){
    var $t = $("#model");

    //clear old options
    $t.html('');

    //fill up new options
    if(options[v]){
        for(var i in options[v]){
            if(options[v].hasOwnProperty(i)){
                $t.append('<option value="' + options[v][i] + '">' + i + '<\/option>')
            }
        }
    }
}

heres a demo http://jsfiddle.net/j7qK6/