CODEWITHSUNDEEP
javascriptjqueryhtml
sapan
sapan

Reputation: 259

jQuery is not working, when i add more drop down lists

I created the page with multiple drop down lists. One of the drop down list populate based on the selection of the other drop down list. and also i added a button at the end of the page.I need to add one more column when i select "add one more item". The issue is when i run the code, everything works good. when i click the button "add one more item" then it is not displaying the second drop down list according selection of first drop down list. Only one drop down list is displaying which is selected above.

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
Dals=new Array("Moong","Chana","Ground","nut");
Flour=new Array('Chana','ravva','Gram');


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

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

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

  } 



function add(tbl1) {

  var tb = document.getElementById(tbl1); 

  var rowCount = tb.rows.length;

  var row = tb.insertRow(rowCount);

  var colCount = tb.rows[1].cells.length;

  for(var i=0; i<colCount; i++) {

      var newCell = row.insertCell(i);

      newCell.innerHTML = tb.rows[1].cells[i].innerHTML;

  }

}
</script>

Html

<body>

<form name="myForm"  onsubmit="return validateForm()" method="post">
<table id=cars border=1>

<tr><td>Category</td><td>Name</td></tr>

<tr>
<td><select name=car[] id="cat">

        <option value="Dals">Dals</option>
        <option value = "Flour">Flour</option>

</select></td>

<td><select name=car[] id="item">



</select></td>

</tr>

</table><br>
<p><input type=button value="Add one more item" onclick="add('cars')"/></p>
<center><input type=submit value=submit></center>

</form>

</body>

</html>

Upvotes: 0

Views: 2385

Answers (3)

tilda
tilda

Reputation: 672

I see you already got the answer but here another one working JSFiddle:

http://jsfiddle.net/R3Pds/

Problem with the same IDs you can resolve by adding onchage event: 

<select name=car[] id="cat" onchange="populateSelect(this);">
                    <option value="Dals">Dals</option>
                    <option value="Flour">Flour</option>
                    <option value="Mix">Mix</option>
                </select>

Upvotes: 1

Yan Brunet
Yan Brunet

Reputation: 4887

First, you have to change the ids to classes.

Then you have to modify a bit your populateSelect function to accept a context.

Also, you have to hook up your events using .on() on a fixed parent (one that is not added dynamically).

Here is the link to the working JSFiddle : http://jsfiddle.net/StzvU/8/

Names  = {"Dals" : ["Moong", "Chana", "Ground", "nut"], 
          "Flour" : ["Chana", "ravva", "Gram"],
          "Mix" : ["GulabJamun", "RavvaDosa", "DosaMix", "IdlyMix"] };

$(document).ready(function () {
    populateSelect($(document));
    $('#cars').on('change', '.cat', function () {
        populateSelect($(this).parents('tr'));
    });
    $('#moar').click(function () {
        add('#cars');
    });
});

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

    Names[cat].forEach(function (t) {
            $('.item', line).append('<option>' + t + '</option>');
        });
}

function add(tbl1) {
    $table = $(tbl1);
    row = $('tr', $table).last().clone();
    populateSelect(row);
    $table.append(row);
}

Upvotes: 1

whitehat101
whitehat101

Reputation: 2549

Improved fiddle: http://jsfiddle.net/StzvU/3/

Your problem is ID reuse and event attaching.

Each ID should be unique per the page. When you clone your rows, the same IDs are being reused.

Additionally, when you use innerHTML to add rows, you aren't attaching events to them.

for (var i = 0; i < colCount; i++) {
    var newCell = row.insertCell(i);
    newCell.innerHTML = tb.rows[1].cells[i].innerHTML;
}

Only the elements in the HTML onload get events. Even if you did attach events to your generated code, you would still have your ID reuse issue.

Upvotes: 1

Related Questions