CODEWITHSUNDEEP
jqueryhtmllistdrop-down-menu
sapan
sapan

Reputation: 259

Is there any limitation to the list in drop down list

I am trying to generate a drop down list based on the selection of another drop down list.

If i give the list of items in first drop down list 8 or less, then everything is working normally.

if i give the list of items in first drop down list more than 8, then the code is not working that means the second drop down list is not populating. I don't know the reason.

Is there any limitation to number of items in the first drop down list?

Can anyone help.

Here is my code.

<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>

This code is working perfectly but when i try to add more items to the first drop down list, then it is not working. Can any tell me the correct issue and how to fix it.

  <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>

Upvotes: 1

Views: 150

Answers (1)

tckmn
tckmn

Reputation: 59323

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

This is invalid syntax. It should be something like

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

Variable names cannot contain hyphens.

An easier approach to this, however, would be to use an associative array:

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

And then replace that HUGE line of ifs with just this:

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

I don't know why your variable names are the options with an "s" after them... if you just didn't use the s then you wouldn't have to do cat + 's'.

Upvotes: 1

Related Questions