Question

代码：

<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文件中，即get-source.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

            }
        })

如何在PHP的数据百分比进度栏中设置Ajax数据值？

1 个答案: