[英]JQUERY to auto-populate a select input from another select input
編輯1
我正在從此代碼獲取CourseID:
$coursesOutput = '<option value=""></option>';
while($row = mysql_fetch_array($result2)){
$courseID = $row['courseID'];
$courseName = $row['name'];
$coursesOutput .= '<option value="' . $courseID . '">' . $courseName . '</option>';
}
我的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();
?>
我沒有收到任何Ajax錯誤,但在T型選擇器中仍然沒有任何填充。 希望這會有所幫助,我再一次被這里的支持所淹沒,難以置信!
結束編輯1
我暫時無法弄清楚這個AJAX-JQUERY功能。 對於優秀的jQuery程序員來說,這應該是個容易的地方。
我希望能夠在用戶選擇課程后自動填充我的T型選擇輸入。 這是一個高爾夫應用程序,球場有幾種不同的發球區配色方案,因此每種方案都是特定於球場的。
到目前為止,我的損壞代碼是:
的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
function populateTee(courseID)
{
$.ajax(
{
url: 'includes/populate_tee.php?courseID=' + courseID,
success: function(data) {
$("#tee").html(data);
}
});
}
的PHP
populate_tee.php腳本起作用,所以我不會浪費您的時間。
我相當確定問題出在上述JQUERY-AJAX腳本中。
任何幫助都會很棒。
提前致謝。
courseID來自哪里? 嘗試將其登錄到控制台。 這有幫助嗎?
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);
}
});
}
我建議不要使用jquery .change()方法,而不是在select上使用onChange事件。 試試下面的代碼應該可以解決問題。
$('#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.