Question

好的，所以我想要实现的是，当用户点击添加时，它将创建一个新的高速公路实例以及mallName和频率，每个都有一个唯一的id，例如：highway1，mall1， freq1：highway2，mall2，freq2 等等。

但到目前为止，当我点击添加时，它会添加项目，但是当我点击使用已生成的第二个下拉列表，或者第三个或第四个等等时，第一个列表会对它做出反应！

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

如何解决此问题？

以下是动态添加新表单实例的代码： $（document）.ready（function（）{

     $('#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，但似乎每个部分中的元素都具有相同的ID。

自动生成新的

1 个答案: