{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 何必那么认真 的问题《When i add more dropdown boxes, javascript is not》','https://www.manongdao.com/q-1034190.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 validateForm(){
var x=document.getElementByName("car[]");
if(x.length == 0 || x[0].value == null || x[0].value == "")
{
alert("Select atleast one grocery.");
return false;
}
}
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>