Javascript 自动生成新的

好的，所以我试图实现的是，当用户单击add时，它将创建一个新的highway实例以及mallName和frequency，每个实例都有一个唯一的id，例如：highway1，mall1，freq1:highway2，mall2，freq2 等等

但到目前为止，当我单击“添加”时，它会添加项目，但当我单击已生成的第二个下拉列表，或第三个或第四个等时，第一个列表会对其作出反应

我假设这是因为我没有为生成下拉列表的函数提供唯一的ID

如何解决此问题

以下是动态添加新表单实例的代码： $（文档）.ready（函数（）{

$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedSection'）.length；
var newNum=新的数字（num+1）；
var newSection=$（'#clonedSection'+num）.clone（）.attr（'id'，'clonedSection'+newNum）；
newSection.children（':first'）.children（':first'）.attr（'id'，'mallName'+newNum）.attr（'name'，'mallName'+newNum）；
newSection.children（':nth child（2'））.children（':first'）.attr（'id'，'frequency'+newNum）.attr（'name'，'frequency'+newNum）；
$（'.clonedSection'）.last（）.append（newSection）
$（'btnDel'）.attr（'disabled'，''）；
如果（newNum==5）
$（'btnAdd'）.attr（'disabled'，'disabled'）；
});
$（'#btnDel'）。单击（函数（）{
var num=$（'.clonedSection'）.length；//当前有多少个“可复制”输入字段
$（'#clonedSection'+num）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（'btnAdd'）.attr（'disabled'，''）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
$（'btnDel'）.attr（'disabled'，'disabled'）；
});

以下是生成动态下拉列表的代码：

    <script>
              centres = new Array();
  centres[0] = new Array( 'Brits Spar Centre', 'Safari Plaza', 'Shoprite Centre');
  centres[1] = new Array( 'Xanadu X-ing');
  centres[2] = new Array( 'CheckersHyper Centre', 'City Mall', 'Flamwood Walk Shopping Centre', 'Game Centre', 'Klerksdorp 01', 'MCC Superspar Centre', 'Pick n Pay Hypermarket', 'Songloed Shopping Centre', 'The Terminus');

  centres2 = new Array();
  centres2[0] = new Array( 'BLA Brits Spar Centre', 'Safari Plaza', 'Shoprite Centre');
  centres2[1] = new Array( 'BLA Xanadu X-ing');
  centres2[2] = new Array( 'BLA CheckersHyper Centre', 'City Mall', 'Flamwood Walk Shopping Centre', 'Game Centre', 'Klerksdorp 01', 'MCC Superspar Centre', 'Pick n Pay Hypermarket', 'Songloed Shopping Centre', 'The Terminus');
  centres2[3] = new Array( 'BLA Lichtenburg Centre');

  cities1 = new Array( 'Brits', 'Klerksdorp', 'Lichtenburg', 'Mabopane', 'Mafikeng', 'Marikana', 'Mmabatho', 'Mogwase', 'Orkney', 'Phokeng', 'Potchesfstroom', 'Rustenburg', 'Sun City', 'Taung', 'Temba', 'Vryburg');
  cities2 = new Array( 'pew', 'pong', 'wong', 'Mabopane', 'Mafikeng', 'Marikana', 'Mmabatho', 'Mogwase', 'Orkney', 'Phokeng', 'Potchesfstroom', 'Rustenburg', 'Sun City', 'Taung', 'Temba', 'Vryburg');



function showHide(obj){
 var curSel = obj.options[obj.selectedIndex].value;

 switch(curSel)
 {
 case 'Free State':

  populateDropDown2(cities1, curSel);
  currentArray = '0';

   break;
 case 'Gauteng':

  populateDropDown2(cities2, curSel);
  currentArray = '1';

   break;
 case 'KZN':
   break;
 case 'Limpopo':
   break;
 case 'Mpumalanga':
   break;
 case 'North West':
   break;
 case 'Northern Cape':
   break;
 case 'Western Cape':
   break;
 default:
  $('#model').css({'display' : 'none'});
 }
}

function populateDropDown2(myArray, currentIndex)
{
   var x;
  $('#model').css({'display' : 'block'});

  $('#model').html("<select name='model' id='sub' onchange='showHideTwo(this);'>");
  for (var j=0; j<myArray.length; j++)
  {
   //populate the select with options
   $('#sub').append("<option value='" + j + "'>" + myArray[j] + "</option>");
  }  
}

function populateMalls(myNextArray, myNextIndex)
{
   var x;
  $('#browny').css({'display' : 'block'});

  $('#browny').html("<select name='browny' id='pie'>");
  for (var i=0; i<myNextArray[myNextIndex].length; i++)
  {
   //populate the select with options
   $('#pie').append("<option value='" + myNextArray[myNextIndex][i] + "'>" + myNextArray[myNextIndex][i] + "</option>");
  }  

}

function showHideTwo(obj) {
 var curSel = obj.options[obj.selectedIndex].value;


 switch(currentArray)
 {
 case '0':
  populateMalls(centres, curSel);
  $('#model').css({'display' : 'block'});

   break;
 case '1':
  populateMalls(centres2, curSel);
     break;

 default :

   break;

 }

}

            </script>

中心=新数组（）；
中心[0]=新阵列（‘Brits Spar中心’、‘Safari广场’、‘Shoprite中心’）；
中心[1]=新阵列（“世外桃源X-ing”）；
中心[2]=新阵列（“CheckerShiper中心”、“城市购物中心”、“Flamwood步行购物中心”、“游戏中心”、“Klerksdorp 01”、“MCC Superspar中心”、“Pick n Pay超市”、“Songloed购物中心”、“终点站”）；
centres2=新数组（）；
centres2[0]=新阵列（'BLA Brits Spar Centre'、'Safari Plaza'、'Shoprite Centre'）；
centres2[1]=新阵列（'BLA Xanadu X-ing'）；
centres2[2]=新阵列（'BLA CheckersHyper Centre'，'City Mall'，'Flamwood Walk Shopping Centre'，'Game Centre'，'Klerksdorp 01'，'MCC Superspar Centre'，'Pick n Pay Hypermarket'，'Songloed Shopping Centre'，'The Terminus'）；
centres2[3]=新阵列（“BLA Lichtenburg中心”）；
cities1=新数组（'Brits'、'Klerksdorp'、'Lichtenburg'、'Mabopane'、'Mafikeng'、'Marikana'、'Mmabatho'、'Mogwase'、'Orkney'、'Phokeng'、'Potchesstroom'、'Rustenburg'、'Sun City'、'Taung'、'Temba'、'Vryburg'）；
cities2=新阵列（'pew'、'pong'、'wong'、'Mapopane'、'Mafikeng'、'Marikana'、'Mmabatho'、'Mogwase'、'Orkney'、'Phokeng'、'Potchesstroom'、'Rustenburg'、'Sun City'、'Taung'、'Temba'、'Vryburg'）；
函数显示隐藏（obj）{
var curSel=obj.options[obj.selectedIndex].value；
开关（光标）
{
“自由州”一案：
人口下降2（城市1，城市1）；
currentArray='0'；
打破
“豪登”案：
人口下降2（城市2，光标）；
currentArray='1'；
打破
案例“KZN”：
打破
“林波波”案：
打破
“Mpumalanga”案：
打破
“西北”案例：
打破
“北开普”案：
打破
西开普省案例：
打破
违约：
$（'#model'）.css（{'display'：'none'}）；
}
}
函数populateDropDown2（myArray，currentIndex）
{
var x；
$（'#model'）.css（{'display'：'block'}）；
$（'#model'）.html（“”）；
对于（var j=0；j来看这个

//populate the select with options
$('#sub').append("<option value='" + j + "'>" + myArray[j] + "</option>");

//使用选项填充select
$（'#sub'）.append（“+myArray[j]+”）；

我猜您需要id=“sub1”，id=“sub2”等等。对于您添加的部分。您没有包含HTML，但似乎每个部分中的元素都有相同的ID。
HTML是什么。为什么不在jsFidlle上模拟一个页面并提供链接呢？可以，只是想先清理一下！Thanx，有意义，会看看这个！
//populate the select with options
$('#sub').append("<option value='" + j + "'>" + myArray[j] + "</option>");