JQuery/Javascript - 下拉列表從另一個下拉列表獲取信息

Question

我有2個下拉菜單。在第一個中你選擇一個模型，在第二個中選擇一個特定的模型。 http://jsfiddle.net/QskM9/

例如：

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) 

我一直想這個整天不能似乎使這項工作。 這是我有這麼遠：

// 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> 

誰能幫助我得到它的工作？注意我不能使用PHP，.NET，Perl等，只能使用HTML和js/jq。

Answer 1

試試這個：

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>') 
      } 
     } 
    } 
} 

繼承人演示http://jsfiddle.net/j7qK6/

Answer 2

function getCo(cid){ 
    var countryVal=$('#cmbCountry').val(); 
    $.post("<?php echo url_for('country/ajaxloadcourse') ?>", //Ajax file 
     { cid: cid }, // create an object will all values 
     //function that is called when server returns a value. 
     function(data) { 
      var selectbox="<select name='province' id='province' class='formSelect' style='width: 150px;' tabindex='4' onchange='getCourseId(this.value,"+countryVal+")'>"; 
      selectbox = selectbox +"<option value=''><?php echo __('--Select--') ?></option>"; 
      $.each(data, function(key, value) { 
       selectbox=selectbox +"<option value="+key+">"+value+"</option>"; 
      }); 
      selectbox=selectbox +"</select>"; 
      $('#provincelist').html(selectbox); 
     }, 
     //How you want the data formated when it is returned from the server. 
     "json" 
    ); 
} 

Answer 3

這是你在找什麼？ http://jsfiddle.net/sEB5k/4/（正下方）或http://jsfiddle.net/npvym/14/（遠低於）

var lists = new Array(); 

lists['Model'] = new Array(); 
lists['Apple'] = new Array(
'www.apple.com/ihphone3g', 
'www.apple.com/iphone4'); 
lists['Nokia'] = new Array(
'http://www.nokiausa.com/us-en/products/phone/e7-00/', 
'http://www.nokiausa.com/us-en/products/phone/c6-01/'); 
lists['Samsung'] = new Array(
'http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR', 
'http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB'); 

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

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

function fyldListe(box, list){ 
    for(i=0; i< list.length; i++){ 
     option = new Option(list[i], list[i]); 
     box.options[i] = option; 
    } 
    box.selectedIndex=0; 
} 

OR

我也採取Przemek的答案，它在很大程度上改進什麼，我想你想要的。我認爲它比我的原始解決方案更漂亮，設計更好。

HTML

<select id="company" name="company"> 
    <option value="nokia" selected="selected">Nokia</option> 
    <option value="samsung">Samsung</option> 
    <option value="apple">Apple</option> 
</select> 

<select id="nokia" name="product" class="product"> 
    <option value="#" selected="selected">Choose product</option> 
    <option value="http://www.nokiausa.com/us-en/products/phone/e7-00/">E7-00</option> 
    <option value="http://www.nokiausa.com/us-en/products/phone/c6-01/">C6-01</option> 
</select> 


<select id="samsung" style="display:none" class="product"> 
    <option value="#" selected="selected">Choose product</option> 
    <option value="http://www.samsung.com/us/mobile/cell-phones/SGH-T989ZKBTMB">SGH-T989ZKBTMB</option> 
    <option value="http://www.samsung.com/us/mobile/cell-phones/SPH-D710ZKASPR">SPH-D710ZKASPR</option> 
</select> 


<select id="apple" style="display:none" class="product"> 
    <option value="#" selected="selected">Choose product</option> 
    <option value="http://www.apple.com/iphone/iphone-4/specs.html">iPhone 4</option> 
    <option value="http://www.apple.com/iphone/iphone-3gs/specs.html">iPhone 3GS</option> 
</select> 

的JavaScript

$("#company").change(function() { 
    $('select[name="product"]').removeAttr("name").hide(); 
    $("#" + $(this).val()).show().attr("name", "product"); 
}); 

$(".product").change(function() { 
    document.location = $(this).val(); 
}); 

Answer 4

我想出了這樣的事情：

jsFiddle

HTML：

<select id="company" name="company"> 
    <option value="nokia" selected="selected">Nokia</option> 
    <option value="samsung">Samsung</option> 
    <option value="apple">Apple</option> 
</select> 

<select id="nokia" name="product"> 
    <option value="1" selected="selected">6300</option> 
    <option value="2">3210</option> 
    <option value="3">3310</option> 
</select> 


<select id="samsung" style="display:none"> 
    <option value="1" selected="selected">Galaxy S</option> 
    <option value="2">Galaxy S2</option> 
    <option value="3">Galaxy Tab</option> 
</select> 


<select id="apple" style="display:none"> 
    <option value="1" selected="selected">iPhone 3</option> 
    <option value="2">iPhone 4</option> 
    <option value="3">iPhone 4S</option> 
</select> 

的jQuery：

$("#company").change(function() { 
    $('select[name="product"]').removeAttr("name").hide(); 
    $("#" + $(this).val()).show().attr("name", "product"); 
});