根據以前的選擇列表中的選項填充多個選擇框

我有一個相當複雜的問題，我似乎無法解決。

根據以前的選擇列表中的選項填充多個選擇框

我有一個輸入文本框字段填充選擇列表，當用戶在文本框中輸入某個'詞'。

例如：
- 如果用戶在文本框中輸入單詞「奔馳」，選擇列表將與「A級」，「B級」來填充，「C級'，'S-class'
- 如果他們在文本框中輸入'Audi'，則選擇列表中將填入'A4'，'A5'，'A6'等。

這到目前爲止的行爲方式我打算這樣做。但是，當用戶從選擇列表中選擇一個模型時，我想在下面創建一個<div>，該列表動態地填充相應的選定車輛附件。

這裏是我的代碼至今：

HTML

<div> 
Manufacturer:<input type="text" id="car_manufacturer"/> 
Model: <select id="car_model"></select> 
</div> 

<p>Vehicle Model Accessories:</p> 
<div id="model_accessories"> 
<!--- Here is a list of the selected vehicle model's accessories. It will change when the model selection changes ------> 
</div>

的Javascript

vehicleModels = { 
    "Mercedes": ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ], 
    "Audi": ["A3", "A4", "A5", "A6", "A7", "A8", ], 
    "BMW": ["120", "320", "330", "520", "635", "745", ] 
}

這個函數在文本框中的值和檢查它是否在上面的對象中定義。如果是，則將相應的車型附加到選擇列表中。

$('#car_manufacturer').change(function() { 
      if(vehicleModels[$(this).val()]) { 
       $.each(vehicleModels[$(this).val()], function() { 
        $('#car_model').append('<option>' + this + '</option>'); 
       }); 
      } 
});

這裏是哪裏出了問題開始了！我怎麼能現在填充模型配件<div>與所選擇的相應型號的配件？這是汽車配件目前如何儲存。

mercedes_accessories = ["Xenons", "Adaptive cruise control", "sunroof"]; 
bmw_accessories = ["Start/stop", "heated seats", "Leather trim"]; 
audi_accessories = ["Electric seats", "B&O Sound System", "Leather trim",];

任何幫助將不勝感激。如果問題有點模糊，我很抱歉，這很難解釋。謝謝！

來源

2012-10-29 user1779796

http://www.javascriptkit.com/script/script2/multiplecombo.shtml – jacktheripper

我會做這樣的事情：

var vehicleModels = { 
     mercedes: ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ], 
     audi: ["A3", "A4", "A5", "A6", "A7", "A8", ], 
     bmw: ["120", "320", "330", "520", "635", "745", ] 
    }, 
    vehicleAcc = { 
     a3 : ["Xenons", "Adaptive cruise control", "sunroof"], 
     a4 : ["Xenons", "Adaptive cruise control", "sunroof"], 
     a6 : ["Xenons", "Adaptive cruise control", "sunroof"] 
    }; 


$('#car_manufacturer').on('change', function() { 
    if(this.value.toLowerCase() in vehicleModels) { 
     $.each(vehicleModels[this.value.toLowerCase()], function(i,e) { 
      $('#car_model').append('<option>'+e+'</option>'); 
     }); 
    } 
}); 

$('#car_model').on('change', function() { 
    if (this.value.toLowerCase() in vehicleAcc) { 
     $.each(vehicleAcc[this.value.toLowerCase()], function(i,e) { 
      $('#car_model_acc').append('<option>'+e+'</option>'); 
     }); 
    } 
});

FIDDLE

來源

2012-10-29 23:28:58 adeneo

嗨，我有一個關於用戶交互的快速問題。當我從選擇列表中選擇「a3」時，它會完美地填充「car_model_acc」選擇列表。但是，如果我選擇「a4」，「car_model_acc」選擇列表將存儲我之前選擇的配件，並將新附件添加到列表的底部。我嘗試過使用'$（「＃car_model」）。focus（function（）{ return $（「＃car_model_acc」）。empty（）; }）;'但是這打破了系統。有沒有可以幫助我找到的解決方案？非常感謝你。 – user1779796

Did'nt真的想想，但試試這個：http://jsfiddle.net/d2FaQ/2/ – adeneo

試試這個：

var accessories; 

accessories.mercedes = ["Xenons", "Adaptive cruise control", "sunroof"]; 
accessories.bmw = ["Start/stop", "heated seats", "Leather trim"]; 
accessories.audi = ["Electric seats", "B&O Sound System", "Leather trim"]; 

$("#car_model").change(function() { 

    // cache accessories for this manufacturer 
    var arr = accessories[ $("#car_manufacturer").val().toLowerCase() ]; 

    for(var i = 0; i < arr.length; i += 1) { 
     $("#accessories").append("<option>" + arr[i] + "</option>"); 
    } 
});

來源

2012-10-29 23:35:13 Bruno

根據以前的選擇列表中的選項填充多個選擇框

回答

相關問題