填充基於選擇的輸入選項

-1

我試圖找到創建大量輸入菜單的最佳方法，該菜單將根據這些選擇自動填充。我遇到的問題是有相當多的選擇。將會有4個下拉菜單。每個下拉菜單將有2個選項。填充基於選擇的輸入選項

我在看下面的例子。雖然這種方法工作的代碼量將是巨大的>> http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

有誰知道實現這個最好的方法？

謝謝，

來源

2012-05-13 felix001

有多少「很多？ –

-1

這可以很容易地完成一些通用的幫助功能。

例如，不是爲每個值手動提供原始HTML，您可以編寫一個函數，根據傳遞的單個值清除並填充<select>元素。

準備工作中，您需要創建一個對象，其中包含第一個<select>的值作爲第二個<select>列表的索引。像這樣的東西 -

var beverages = { 
'wine' : ['Red','White'], 
'beer' : ['dark','pale'], 
'juice': ['mango','grapefruit'] 
};

現在我們知道，beverages['beer'][0]能給我們帶來寒冷的一瓶啤酒。

從這裏我們可以寫一個更通用的功能，以幫助我們與HTML操作...

function populateSelect(category){ 
    // remove all existing options. 
    $("#secondSelection").find('option').remove(); 
    $.each(beverages[category],function(index,elem){ 
    // for each item in beverages[category], 
    // we add an option to the <select>. 
    $("#secondSelection").append('<option>'+elem+'</option>'); 
    }); 
}

你會調用該函數這樣的 -

populateSelect($("#firstSelection").val());

的標記，你會必須有會是這樣的 -

<select id="firstSelection"> 
    <option value='beer'>Beer</option> 
    <option value='wine'>Wine</option> 
    <option value='juice'>Juice</option> 
</select> 
<select id="secondSelection"> 
    <option>Choose a Category</option> 
</select>

對於更復雜的結構，例如您所描述的結構，您可以在原始對象中嵌套更多選項，並且它是數組...

來源

2012-05-13 18:41:12 Lix

感謝您的更新。但即時通訊只是試圖全部測試，但jQuery似乎失敗了。任何想法http://jsfiddle.net/Y3wa5/3/ – felix001

是的，我的代碼有一個小小的錯誤。但看看[這]（http://jsfiddle.net/Y3wa5/10/） - 這就是你應該如何實現這一點。你仍然需要附加一個'.on（'change'）'listener ... – Lix

你應該考慮讓你的第一個'

填充基於選擇的輸入選項

回答

相關問題