如何在 php 的数据百分比进度条中设置 ajax 数据值?

Question

code：

<script>
$(document).ready(function(){
$("#source").change(function(){
source = $(this).val();
$.ajax({
type:"POST",
data:{"source":source},
url:"get-source.php",
success:function(data){
show = JSON.parse(data);
$("#total").html(show.total);
$("#sources").html(show.sources);
$("#progress1").attr('data-percent', 5);
$("#progress1").data('percent', 5);
}
});
});
$("#tech").change(function(){
tech = $(this).val();
$.ajax({
type:"POST",
data:{"tech":tech},
url:"get-tech.php",
success:function(data){
show = JSON.parse(data);
$("#per_tech").html(show.per_tech);
$("#techno").html(show.techno);
$("#progress2").attr('data-percent', 5);
$("#progress2").data('percent', 5);
}
});
}); 
});
</script>
<select name="source" id="source" class="form-control">
<option>Select Source</option>
<?php
$sql = "select name from source";
$res = mysqli_query($con,$sql);
while($rows = mysqli_fetch_array($res))
{
echo "<option value='".$rows['name']."'>".$rows['name']."</option>";
}
?>
</select>
<select name="tech" id="tech" class="form-control">
<option>Select Technology</option>
<?php
$sql = "select name from course";
$res = mysqli_query($con,$sql);
while($rows = mysqli_fetch_array($res))
{
echo "<option value='".$rows['name']."'>".$rows['name']."</option>";
}
?>
</select>
<div class="bar-chart">
<div class="chart clearfix">
<div class="item">
<div class="bar">
<span class="percent"><div id="total"></div></span>
<div class="progress" id="progress1" data-percent="75">
<span class="title"><div id="sources"></div></span>
</div>
</div>
</div>
<div class="item">
<div class="bar">
<span class="percent"><div id="per_tech"></div></span>
<div class="progress" id="progress2" data-percent="">
<span class="title"><div id="techno"></div></span>
</div>
</div>
</div>
</div>
</div>

在此代码中，我创建了百分比进度条。现在在我的 ajax 文件中，即获取源代码.php 和 get-tech.php我已经通过查询计算了百分比，该查询工作正常并显示在进度栏中，但问题是当我从下拉列表中更改任何值时，它会显示百分比，但我无法通过 ajax 将动态值传递给数据百分比。那么，我该怎么做呢？请帮助我。

谢谢

Answer 1

在 ajax 代码中，您必须动态设置数据百分比值。现在它每次都只通过$("#progress2").attr('data-percent', 5);。 应该是这样的，

$("#tech").change(function(){
tech = $(this).val();
$.ajax({
type:"POST",
data:{"tech":tech},
url:"get-tech.php",
success:function(data){
show = JSON.parse(data);
$("#per_tech").html(show.per_tech);
$("#techno").html(show.techno);
$("#progress2").attr('data-percent', show.per_tech);//here you can pass the value
}
})