我目前堅持根據從下拉串列中選擇的值在同一頁面上獲取 div 的資料。
我有一個下拉選單，用戶可以在其中選擇一個值。下拉選單從 CourseOverview-Model 中獲取資料。根據選擇，頁面第二部分的 div 也應該填充來自 CourseOverview-Model 的資料。在我的代碼中，console.log 顯示了我選擇的值。但是我堅持連接到整個資料，以便填寫頁面的第二部分。任何幫助表示贊賞。
目標是在下一步中使用預填充的表格創建單獨的記分卡。
我的 html 看起來像這樣：
<!--Dropdown-->
<div class="container">
<select id="choosecourse">
<option value="">Select course</option>
{% for course in courses %}
<option>{{ course.name }}</option>
{% endfor %}
</select>
</div>
<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
<h5>{{ id.name }}</h5>
</div>
<div class="container">
<table class="table input-width">
<tr>
<td>Holes:</td>
<td>{{ id.holes }}</td>
<td>Par:</td>
<td>{{ id.par }}</td>
</tr>
<tr>
<td>Your handicap:</td>
<td>{{ user.handicap }}</td>
<td>Extra strokes:</td>
<td><input type="number" min="0"></td>
</tr>
</table>
</div>
我的 javascript 看起來像這樣：
<script>
$(document).ready(function() {
$('#choosecourse').change(function(){
var name = document.getElementById("choosecourse").value;
console.log(name)
});
});
</script>
我的 views.py 看起來像這樣：
def add_score(request):
courses = CourseOverview.objects.all()
return render(request, "mrc/add_score.html", {
"courses": courses
})
這些都是來自models.py的必要模型：
class CourseOverview(models.Model):
course_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=64, unique=True)
par = models.PositiveIntegerField()
holes = models.PositiveIntegerField()
class Course(models.Model):
course = models.ForeignKey("CourseOverview", on_delete=CASCADE, related_name="course")
hole = models.PositiveIntegerField()
holepar = models.PositiveIntegerField()
holehcpi = models.PositiveIntegerField()
提前謝謝了！
編輯 我嘗試了例如以下內容：
<div class="container">
<select id="choosecourse">
<option value="">Select course</option>
{% for course in courses %}
<option>{{ course.name }}</option>
{% endfor %}
</select>
</div>
<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
<h5 id="name"></h5>
</div>
<div class="container">
<table class="table input-width">
<tr>
<td>Holes:</td>
<td id="holes"></td>
<td>Par:</td>
<td id="par"></td>
</tr>
<tr>
<td>Your handicap:</td>
<td>{{ user.handicap }}</td>
<td>Extra strokes:</td>
<td><input type="number" min="0"></td>
</tr>
</table>
</div>
Javascript
$(document).ready(function() {
$('#choosecourse').change(function(){
var name = document.getElementById("choosecourse").value;
fetch("mrc/add_score.html", {
method: "PUT",
headers:{
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
})
.then(response => {
return response.json()
})
.then(data => {
document.querySelector('#name').innerhtml = id.name
document.querySelector('#holes').innerhtml = id.holes
document.querySelector('#par').innerhtml = id.par
})})})
And views.py:
def add_score(request):
if request.method == "PUT":
data = CourseOverview.objects.all()
return JsonResponse(data)
else:
courses = CourseOverview.objects.all()
return render(request, "mrc/add_score.html", {
"courses": courses
})
uj5u.com熱心網友回復：
我為我的問題找到了另一個解決方案。由于我的頁面已經有它需要的所有資訊，我為所有包含我想要的資料的 div 添加了一個 for 回圈并隱藏它們。
在下一步中，我添加了一些 javascript 來顯示在下拉串列中選擇的 div 并隱藏其他 div。
下面是對應的代碼。希望這可以幫助有類似問題的人。
HTML
<div class="container">
<select id="choosecourse">
<option value="">Select course</option>
{% for course in courses %}
<option>{{ course.name }}</option>
{% endfor %}
</select>
</div>
<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
<h5 id="name"></h5>
</div>
<div class="container">
{% for course in courses %}
<div style="display: none;" class="hidethem" data-name="{{ course.name }}">
<div><h5 id=>{{ course.name }}</h5></div>
<div><table class="table input-width">
<tr>
<td>Holes:</td><td>{{ course.holes }}</td>
<td>Par:</td><td>{{ course.par }}</td>
</tr>
<tr>
<td>Your handicap:</td><td>{{ user.handicap }}</td>
<td>Extra strokes:</td><td><input type="number" min="0"></td>
</tr>
</table></div>
</div>
{% endfor %}
</div>
我的 javascript 看起來像這樣：
$(document).ready(function() {
$('#choosecourse').change(function(){
let name = document.getElementById("choosecourse").value;
console.log(name);
$(".hidethem").hide();
document.querySelector("[data-name=" CSS.escape(name) "]").style.display = 'block';
});
});
盡管如此，感謝您有機會在這里討論問題！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/389413.html
標籤：javascript django ajax
上一篇：使用Ajax在Javascript檔案中傳遞和使用PHP變數
下一篇：埠8083上的Django后端無法決議從埠8081上的gulp網頁提供的JQueryAJAXCORSPOST請求