Question

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

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

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

然后用这个替换那个巨大的if行：

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

我不知道为什么你的变量名称是option s后面带有“s”...如果你只是没有使用s那么你就不必做cat + 's'。

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

1 个答案: