具有动态div id的循环javascript

这可以根据第一个下拉菜单的结果动态创建第二个下拉菜单：

for (var i = 0; i < 1; i++) {
    $('#wdiv' + i).change(function() {
        var wdiv = $(this).val();

        $.ajax({
            type: "POST",
            url: "populate_classes.php",
            data: 'theOption=' + wdiv,
            success: function(whatigot) {
                $('#class_list' + i).html(whatigot);
            } 

        }); //END $.ajax
    }); //END dropdown change event 
}

为什么从下拉列表选择wdiv0的输入会更改下拉菜单class_list1？我希望wdiv选择设置classlist0下拉选择

以下是表格的一部分：

<fieldset><legend>Select Divisions</legend>              
  <table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td><div align="center"><u><strong>Name</strong></u></div></td>
    <td><div align="center"><u><strong>Division</strong></u></div></td>
    <td><div align="center"><u><strong>Class</strong></u></div></td>
  </tr>
  <?php for ($i = 0; $i < $wrestlerkey; $i++) {    
      $sql = 'SELECT * FROM tourn_division AS td WHERE t_num = ?';
      $divresult = $dbConnect->fetchAll($sql, $_SESSION['tourn_id']);
      $divcount = count($divresult);
  ?>          
    <tr>
      <td width="20%" bgcolor="#CCCCCC"><div align="right"><?php echo $_SESSION['wfirst'][$i] . " " . $_SESSION['wlast'][$i] . ":"; ?></div></td>
      <td>
        <select name="<?php echo "wdiv" . $i ?>" id="<?php echo "wdiv" . $i ?>">
        <?php for ($d = 0; $d < $divcount; $d++) { ?>
          <option value="<?php echo $divresult[$d]->div_num; ?>"><?php echo $divresult[$d]->div_name; ?></option>
        <?php } ?>  
      </select></td>
      <td>
      <div id="<?php echo "class_list" . $i ?>"></div>
      </td>
    </tr>
    <?php } ?>
  </table>
</fieldset>  

---

ajax响应在循环完成后返回，因此它将始终是i的最后一个值。您需要将变量设置为i或在其周围放置闭包：

    for (var i = 0; i < 1; i++) {
       var currentIndex = i; // this will not work (see comments below)
        $('#wdiv' + i).change({currentIndex: i}, function(e) {
            var wdiv = $(this).val();
            var currentIndex = e.data.currentIndex;
            $.ajax({
                type: "POST",
                url: "populate_classes.php",
                data: 'theOption=' + wdiv,
                success: function(whatigot) {
                    $('#class_list' + currentIndex).html(whatigot);
                } 

            }); //END $.ajax
        }); //END dropdown change event 
    }

或

---

这是因为您创建的AJAX回调处理程序都共享对同一变量i的引用。为了避免这种情况，您可以使用单独的函数编辑创建成功处理程序-事实上，由于此处代码结构的性质，您需要在单独的函数中进行整个更改回调：

function makeChangeHandler(listIndex) {
  return function() {
    var wdiv = $(this).val();

    $.ajax({
        type: "POST",
        url: "populate_classes.php",
        data: 'theOption=' + wdiv,
        success: function(whatigot) {
            $('#class_list' + listIndex).html(whatigot);
        } 
     });
  };
}

// ...

for (var i = 0; i < 2; i++) { // for 2, substitute actual number of elements involved
    $('#wdiv' + i).change( makeChangeHandler(i) );
}

该函数将返回实际的处理程序函数。makeSuccessHandler返回的每个这样的函数都有自己的循环索引的私有副本

---

注意所做的编辑-整个更改处理程序需要在helper函数中构造。

这不起作用，原因与使用plain i不起作用完全相同。在实际调用更改处理程序之前，currentIndex变量不会初始化：currentIndex需要在函数外部设置。尽管匿名函数版本正常，但仍然无法工作。JavaScript变量的作用域严格限定在函数级别，因为局部变量currentIndex的作用域与我的作用域完全相同。因此，这些事件处理程序中的每一个都有一个对闭包中完全相同的变量的引用，因此当循环完成时，它的值将与i相同。你是对的。对于这个实例，我可能希望使用事件数据将正确的索引传递给变更函数，只要您在进入变更函数之前创建了成功处理程序，这应该是正确的work@JaimeMorales哦，说得好！！无论如何，我都在努力添加更多的原始代码。谢谢我是将makeSuccesshandler放在for循环之前还是放在for循环内部？@MattKeel放在循环外部的某个位置会更好。好的，通过上面的代码设置wdiv0，可以正确地设置新的下拉类_list0。但是，设置wdiv1对类列表1没有影响

function makeChangeHandler(listIndex) {
  return function() {
    var wdiv = $(this).val();

    $.ajax({
        type: "POST",
        url: "populate_classes.php",
        data: 'theOption=' + wdiv,
        success: function(whatigot) {
            $('#class_list' + listIndex).html(whatigot);
        } 
     });
  };
}

// ...

for (var i = 0; i < 2; i++) { // for 2, substitute actual number of elements involved
    $('#wdiv' + i).change( makeChangeHandler(i) );
}