對下拉列表中的列表是否有任何限制

如果我給第一個下拉列表中的項目列表8或更少，那麼一切正常工作。

如果我給第一個下拉列表中的項目列表超過8個，那麼代碼不工作，這意味着第二個下拉列表不填充。我不知道原因。

第一個下拉列表中的項目數是否有限制？

任何人都可以幫忙。

這是我的代碼。

<html><body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 
mobiles=new Array('at&t','Dokomo','Sony'); 
Dals=new Array("Moong","Chana","Ground","nut"); 
Flours=new Array('Chana','ravva','Gram'); 
Mixes = new Array('GulabJamun','RavvaDosa', 'DosaMix','IdlyMix'); 
Rices = new Array('SonaMasoor','PulavRice','PL','Masoor'); 
Vegetabless = new Array('Doodi','Okra','GreenChili','Beerakaya'); 


$(function() { 
populateSelect(); 

    $('#cat').change(function(){ 
    populateSelect(); 
}); 

}); 


function populateSelect(){ 
cat=$('#cat').val(); 
$('#item').html(''); 


if(cat=='car'){ 
    cars.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 

if(cat=='phone'){ 
    phones.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 

if(cat=='mobile'){ 
    mobiles.forEach(function(t){ 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Dal'){ 
    Dals.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Flour'){ 
    Flours.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Mix'){ 
    Mixes.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Rice'){ 
    Rices.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Vegetables'){ 
    Vegetabless.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 

} 

</script> 
<table id=Groceries><tr><td> 
<select name=Category id="cat"> 
<option value="car">car</option> 
<option value="phone">phone</option> 
<option value=mobile>Mobile</option> 
<option value="Dal">Dal</option> 
     <option value = "Flour">Flour</option> 
     <option value = "Mix">Mix</option> 
     <option value = "Rice">Rice</option> 
     <option value = "Vegetables">Vegetables</option> 

</select> 
</td> 
<td><select name=Category id="item"> 

</select> 
</td></tr></table> 
<p><input type=button value="Add one more item" onclick="add('Groceries')"></p> 
</body></html>

此代碼工作正常，但是當我嘗試向第一個下拉列表中添加更多項目時，它不起作用。任何人都可以告訴我正確的問題以及如何解決問題。

<html><body> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 
mobiles=new Array('at&t','Dokomo','Sony'); 
Dals=new Array("Moong","Chana","Ground","nut"); 
Flours=new Array('Chana','ravva','Gram'); 
Mixes = new Array('GulabJamun','RavvaDosa', 'DosaMix','IdlyMix'); 
Rices = new Array('SonaMasoor','PulavRice','PL','Masoor'); 
Vegetabless = new Array('Doodi','Okra','GreenChili','Beerakaya'); 
Leafy-vegs = new Array('Spinach','Coriyander','Methi'); 
Non-vegs = new Array('Chicken','Mutton','Fish'); 
Sweetss = new Array('Rasagula','Rasamalayi','Kova'); 
Snackss = new Array('Samosa','MirchiBajji','Chakli'); 
Frozen-vegs = new Array('DrumSticks','Akakarakaya','Mullangi'); 
Frozen-sweetss = new Array('Rasamalayi','Gulabjamun','Kova'); 




$(function() { 
populateSelect(); 

    $('#cat').change(function(){ 
    populateSelect(); 
}); 

}); 


function populateSelect(){ 
cat=$('#cat').val(); 
$('#item').html(''); 


if(cat=='car'){ 
    cars.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 

if(cat=='phone'){ 
    phones.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 

if(cat=='mobile'){ 
    mobiles.forEach(function(t){ 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Dal'){ 
    Dals.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Flour'){ 
    Flours.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Mix'){ 
    Mixes.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Rice'){ 
    Rices.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
if(cat=='Vegetables'){ 
    Vegetabless.forEach(function(t) { 
     $('#item').append('<option>'+t+'</option>'); 
    }); 
} 
     if(cat=='Leafy-veg'){ 
     Leafy-vegs.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 
    if(cat=='Non-veg'){ 
     Non-vegs.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 
    if(cat=='Sweets'){ 
     Sweetss.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 
    if(cat=='Snacks'){ 
     Snackss.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 
    if(cat=='Frozen-veg'){ 
     Frozen-vegs.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 
    if(cat=='Frozen-sweets'){ 
     Frozen-sweetss.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 


} 

</script> 
<table id=Groceries><tr><td> 
<select name=Category id="cat"> 
<option value="car">car</option> 
<option value="phone">phone</option> 
<option value=mobile>Mobile</option> 
<option value="Dal">Dal</option> 
<option value = "Flour">Flour</option> 
     <option value = "Mix">Mix</option> 
     <option value = "Rice">Rice</option> 
     <option value = "Vegetables">Vegetables</option> 
<option value = "Leafy-veg">Leafy-veg</option> 
     <option value = "Non-veg">Non-veg</option> 
     <option value = "Sweets">Sweets</option> 
     <option value = "Snacks">Snacks</option> 
     <option value = "Frozen-veg">Frozen-veg</option> 
     <option value = "Frozen-sweets">Frozen-sweets</option> 

</select> 
</td> 
<td><select name=Category id="item"> 

</select> 
</td></tr></table> 
<p><input type=button value="Add one more item" onclick="add('Groceries')"></p> 
</body></html>

來源

2013-09-28 sapan

Leafy-vegs = new Array('Spinach','Coriyander','Methi');

這是無效的語法。它應該是類似於

leafyVegs = new Array('Spinach','Coriyander','Methi');

變量名稱不能包含連字符。

一種更簡單的方法來這一點，但是，將使用關聯數組：

items = { 
    cars: ["Mercedes","Volvo","BMW","porche"], 
    phones: ['Samsung','Nokia','Iphone'], 
    // etc. insert your stuff here 
    // you can use dashes in these, just use string literals, like this: 
    'leafy-vegs': ['Spinach','Coriyander','Methi'], 
    // you can even use spaces 
    'frozen vegs': ['DrumSticks','Akakarakaya','Mullangi'] 
}

然後只用這個替代的if s表示陣容龐大：

items[cat + 's'].forEach(function(t) { 
    $('#item').append('<option>'+t+'</option>'); 
});

我不知道爲什麼你的變量名是option s，後面跟着一個「s」......如果你只是沒有使用s那麼你就不需要做cat + 's'。

來源

2013-09-28 22:36:47 Doorknob

對下拉列表中的列表是否有任何限制

回答

相關問題