[英]JQUERY to auto-populate a select input from another select input
EDIT 1 编辑1
I am getting courseID from this code: 我正在从此代码获取CourseID:
$coursesOutput = '<option value=""></option>';
while($row = mysql_fetch_array($result2)){
$courseID = $row['courseID'];
$courseName = $row['name'];
$coursesOutput .= '<option value="' . $courseID . '">' . $courseName . '</option>';
}
My php script is as follows (returning an echo statement) 我的PHP脚本如下(返回一个echo语句)
<?php
include ("includes/connect.php");
$courseID = mysql_real_escape_string($_GET['courseID']);
$sql = "SELECT tee1, tee2, tee3, tee4, tee5 FROM courses WHERE courseID='$courseID' LIMIT 1";
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_array($result)){
$tee1 = $row['tee1'];
$tee2 = $row['tee2'];
$tee3 = $row['tee3'];
$tee4 = $row['tee4'];
$tee5 = $row['tee5'];
}
$teesOutput = '<option value="' . $tee1 . '">' . $tee1 . '</option>';
if($tee2 != ""){
$teesOutput .= '<option value="' . $tee2 . '">' . $tee2 . '</option>';
}
if($tee3 != ""){
$teesOutput .= '<option value="' . $tee3 . '">' . $tee3 . '</option>';
}
if($tee4 != ""){
$teesOutput .= '<option value="' . $tee4 . '">' . $tee4 . '</option>';
}
if($tee5 != ""){
$teesOutput .= '<option value="' . $tee5 . '">' . $tee5 . '</option>';
}
echo '' . $teesOutput . '';
die();
?>
I am not getting any ajax errors but still nothing populating in my tee selector. 我没有收到任何Ajax错误,但在T型选择器中仍然没有任何填充。 Hope this helps, once again I am overwhelmed by the support here, unbelieveable!
希望这会有所帮助,我再一次被这里的支持所淹没,难以置信!
End EDIT 1 结束编辑1
I have been unable to figure this AJAX-JQUERY feature out for awhile now. 我暂时无法弄清楚这个AJAX-JQUERY功能。 It should be an easy spot for good jQuery programmers.
对于优秀的jQuery程序员来说,这应该是个容易的地方。
I want to be able to auto-populate my tee select input after a user selects their course. 我希望能够在用户选择课程后自动填充我的T型选择输入。 This is a golf app and courses have several different tee color schemes so each will be course specific.
这是一个高尔夫应用程序,球场有几种不同的发球区配色方案,因此每种方案都是特定于球场的。
So far my broken codes are: 到目前为止,我的损坏代码是:
HTML 的HTML
<form id="formAddScore" action="addscore.php" enctype="multipart/form-data" method="post">
<p class="profile_label">Select Date:</p>
<input type="text" id="datepicker" name="datepicker" class="score_input" />
<p class="profile_label">Select Course:</p>
<select id="course" name="course" class="score_input" onchange="populateTee(this.value)">
' . $coursesOutput . '
</select>
<p class="profile_label">Select Tee:</p>
<select id="tee" name="tee" class="score_input">
</select>
<p class="profile_label">Actual Score:</p>
<input id="score" name="score" class="score_input" type="text" size="10" />
<p class="profile_label">Score ESC (Equitable Stroke Control):</p>
<input id="scoreESC" name="scoreESC" class="score_input" type="text" size="10" />
<br/>
<input id="btnAddScore" name="btnAddScore" class="btn_score" type="submit" value="Add Score" />
</form>
JQUERY JQUERY
function populateTee(courseID)
{
$.ajax(
{
url: 'includes/populate_tee.php?courseID=' + courseID,
success: function(data) {
$("#tee").html(data);
}
});
}
PHP 的PHP
populate_tee.php script WORKS, so I won't waste your time including it. populate_tee.php脚本起作用,所以我不会浪费您的时间。
I am fairly certain the problem is in the above JQUERY-AJAX script. 我相当确定问题出在上述JQUERY-AJAX脚本中。
Any help would be wonderful. 任何帮助都会很棒。
Thanks in advance. 提前致谢。
Where does courseID come from? courseID来自哪里? Try logging it into the console.
尝试将其登录到控制台。 Does this help?
这有帮助吗?
function populateTee(courseID){
$.ajax({
url: 'includes/populate_tee.php?courseID=' + courseID,
success: function(data) {
//Assuming you're returning the tees list as an indexed array
var ops = '';
for(var i=0; i<data.length; i++){
ops += '<option>'+data[i]+'</option>';
}
$("#tee").html(ops);
}
});
}
Instead of using onChange event on select i suggest use of jquery .change() method. 我建议不要使用jquery .change()方法,而不是在select上使用onChange事件。 Try following code it should solve the problem.
试试下面的代码应该可以解决问题。
$('#course').on('change', function () {
var courseID = $(this).val();
$.ajax({
type: "post",
url: 'includes/populate_tee.php?courseID=' + courseID,
success: function(data) {
$("#tee").html(data);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.