需要协助将jquery单个函数转换为具有多个函数的对象实例

你好：我有一个数据库中存储的团队列表，它们都与一个部门相关联。每个团队都有一个"div_id"和一个"team_id"。我有一个jquery函数（下拉列表），它被提供div_id，然后执行ajax调用来查找该部门的团队，并在另一个下拉列表中列出他们。。。

这一切都奏效了；所以我现在要做的基本上是在一个页面上有多个这样的实例。所有这些都是相互独立的。所以我想，让这些相互独立；它们将需要成为对象。我用PHP做过对象，但从来没有用JS。在PHP中，我总是将对象存储在一个数组中，所以我在这里也做了同样的计算。因此，我尝试将我的单一解决方案转换为一个可以在一个页面上工作多次的解决方案。它不起作用，所以我正在寻求一些帮助。我将首先发布"工作"的单一版本。然后我会发布我将其转换为对象的尝试。。。

以下是使用单个下拉菜单集的功能：

$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row)     {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>"    onchange="G_function1(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
 $div_id = $resultsg1[div_id];
 $div_name = $resultsg1[div_name];
 ?>
  <option value="<?php echo $div_id; ?>"  >
  <?php echo $div_name; ?></option>
<?php   } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
 function G_function1(sel) {
 var value = sel.value;  
 var answer = value;
$.ajax({
 cache: false,
 type: 'GET',
 url:  'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
 data: 'answer=' + answer,
 dataType: 'html',
 success: function(response) {
    $("#<?php echo $div_box_id; ?>").html(response);
  }
});
    }
</script>

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

好的，现在是我尝试转换它：

$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row)     {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;

echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>"  onchange="person(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
 $div_id = $resultsg1[div_id];
 $div_name = $resultsg1[div_name];
 ?>
 <option value="<?php echo $div_id; ?>"  >
 <?php echo $div_name; ?></option>
 <?php   } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
function person(div_id,slot_id) {
this.div_id = div_id;
this.slot_id = slot_id;
this.show_teams = function (div_id,slot_id) {
    var value = div_id.value;  
 var answer = value;
$.ajax({
cache: false,
type: 'GET',
url:  'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + answer,
dataType: 'html',
success: function(response) {
    $("#<?php echo $div_box_id; ?>").html(response);
}
});
}
}
var show_them[slot_id] = new person(div_id,slot_id);
 show_them.show_teams(div_id,slot_id);
    }
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

所以第二个版本不起作用，所以我希望有人能帮我…

********************更新时间：美国东部时间凌晨2:42***********************好的，罗默：这是我基于你的答案的新代码：

$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row)     {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;

echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select class="divisions" name="<?php echo $function_name; ?>">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
 $div_id = $resultsg1[div_id];
 $div_name = $resultsg1[div_name];
 ?>
 <option value="<?php echo $div_id; ?>"  >
<?php echo $div_name; ?></option>
<?php   } ?>
</select>
<div class="teams"></div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
$(function() {
$("select.divisions").on('change', function() {
    var $this = $(this);
    $.ajax({
        cache: false,
        type: 'GET',
        url:   'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
        data: 'answer=' + $this.val(),
        dataType: 'html',
        success: function(response) {
            //find the appropriate teams div relative to `this` select element and stuff the response into it.
            $this.nextAll(".teams").html(response);
        }
    });
});
});
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

这是我的新代码，基于R的答案，但仍然什么都不做。因此，如果有人能帮上忙，我们将不胜感激。。。