Автоматическое создание нового

Question

Хорошо, так что я пытаюсь достичь, когда пользователь нажимает на добавление, он создаст новый экземпляр шоссе вместе с mallName и частотой, каждый из которых будет иметь уникальный идентификатор, например: highway1, mall1, freq1: highway2, mall2, freq2 и т. д.

Но до сих пор, когда я нажимаю кнопку «Добавить», он добавляет элементы, но когда я нажимаю, используйте второй раскрывающийся список, который был сгенерирован, или третий или четвертый и т. д., первый список реагирует на него!

Я предполагаю, что это связано с тем, что я не могу предоставить уникальный идентификатор функциям, которые генерируют выпадающие списки.

Как исправить эту проблему?

Вот код, который динамически добавляет новые формы экземпляры: $ (документ) .ready (функция() {

 $('#btnAdd').click(function() { 
      var num  = $('.clonedSection').length; 
      var newNum = new Number(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',''); 

      if (newNum == 5) 
       $('#btnAdd').attr('disabled','disabled'); 
     }); 

     $('#btnDel').click(function() { 
      var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have 
      $('#clonedSection' + num).remove();  // remove the last element 

      // enable the "add" button 
      $('#btnAdd').attr('disabled',''); 

      // if only one element remains, disable the "remove" button 
      if (num-1 == 1) 
       $('#btnDel').attr('disabled','disabled'); 
     }); 

     $('#btnDel').attr('disabled','disabled'); 
    }); 

</script> 

Вот код, который генерирует динамический раскрывающихся списков:

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

Любая помощь будет принята с благодарностью! спасибо!

Кроме того, код может иметь несколько синтаксических ошибок в, так как я б я работал над этим некоторое время, и я, возможно, пропустил несколько мелочей, поэтому извиняюсь заранее!

Answer 1

Глядя на это ...

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

я думаю, что вам нужно ID = "SUB1", ID = "SUB2" и т.д. для секций добавляемых. Вы не указали свой HTML, но кажется, что элементы в каждом разделе имеют одинаковые идентификаторы.