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

【问题标题】：Is there any limitation to the list in drop down list下拉列表中的列表是否有任何限制
【发布时间】：2013-09-29 06:42:22
【问题描述】：

我正在尝试根据另一个下拉列表的选择生成一个下拉列表。

如果我在第一个下拉列表中给出 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>

【问题讨论】：

标签： jquery html list drop-down-menu

【解决方案1】：

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

然后用这个替换 ifs 的那一大行：

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

我不知道为什么你的变量名是options，后面有一个“s”......如果你只是不使用s，那么你就不必这样做cat + 's' .

【讨论】：