Question

您好：我有一个存储在数据库中的团队列表，它们都与一个部门相关联。每个团队都有一个＆＃34; div_id＆＃34;和＃34; team_id＆＃34;。我有一个jquery函数（下拉列表），它被提供给div_id然后进行ajax调用以查找该部门的团队并将它们列在另一个下拉列表中......

这一切都奏效了;所以我现在要做的事实上是在页面上有多个这样的实例。所有这些都是彼此独立的。所以我认为这些是彼此独立的;他们需要成为对象。我已经用PHP完成了对象，但从来没有JS。在PHP中，我总是将对象存储在一个数组中，所以我在这里想到了同样的东西。因此，我尝试将我的工作单一解决方案转换为可在页面上多次工作的解决方案。它没有用，所以我正在寻求帮助。我将首先发布＆＃34;工作＆＃34;单一版本。然后我将发布我将其转换为对象的尝试...

这是与单组下拉列表一起使用的函数：

$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更新********************** * OK Roamer：这是基于你答案的新代码：

$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的答案，但仍然无所作为。因此，如果有人可以提供帮助，我们将不胜感激......

Answer 1

你似乎不需要做太多工作来解决这个问题：

在HTML中，使用类而不是ID来标识选择元素及其目标div。
确保脚本和链接标记位于文档<head>...</head>
使用javascript而不是HTML附加onchange处理程序。
在onchange处理程序中，遍历DOM以找到相应的团队div relative 到正在处理其更改事件的select元素。
将脚本包裹在$(function() {...});中，以确保在DOM ready事件触发之前不会尝试运行

<强> HTML

<select class="divisions" name="<?php echo $function_name; ?>">...</select>
<div class="teams"></div>

<强>的Javascript

$(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);
            }
        });
    });
});

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

1 个答案: