动态复选框和更新 html 页面答案

【问题标题】：Dynamic checkbox and update html page动态复选框和更新 html 页面
【发布时间】：2020-02-01 18:32:25
【问题描述】：

我正在尝试制作一个小型网页，执行以下操作： 1.用户选择一个级别，然后根据选择，会有一些选项显示为复选框。 2.用户可以选择一个或多个选项

我想让他或她选择的选项以及与此相关的值动态显示在同一页面上。该值存储在 mySQL 数据库中。

第一步有效，但第二步无效。如果有人可以帮助我？一旦复选框被选中与否，页面就不会更新。

这是我的测试代码：

代码 HTML

<script>
$(document).ready(function(){
    $('#id_class').on('change', function(){
        var _class = $(this).val();
        if(_class){
            $.ajax({
                type:'GET',
                url:'ajaxData.php',
                data:'_class='+_class,
                success:function(html){
                    $('#id_opt').html(html);
                }
            }); 
        }else{
            $('#id_opt').html('<option value="">Complete CP first</option>');
        }
    });
});

$(document).ready(function(){
    $('#id_sci').on('click change', function(){
        var _sci = $(this).val();
        if(_sci){
            $.ajax({
                type:'GET',
                url:'ajaxDataPrice.php',
                data:'_sci='+_sci,
                success:function(html){
                    $('#id_price').html(html);
                }
            }); 
        }else{
            $('#city').html('<option value="">Complete CP first</option>');
        }
    });
});
</script>

<body>    
    <form action="test_menu.php" method="POST">
        <select id="id_class" name="_class">
            <optgroup label="Primaire">
                <option value="CP">CP</option>
                <option value="CE1">CE1</option>
                <option value="CE2">CE2</option>
                <option value="CM1">CM1</option>
                <option value="CM2">CM2</option>
            </optgroup>
            <optgroup label="Collège">
                <option value="6ème">6ème</option>
                <option value="5ème">5ème</option>
                <option value="4ème">4ème</option>
                <option value="3ème">3ème</option>
            </optgroup>
        </select>

 <input id="id_intern" type="checkbox" name="_intern" value="Yes"> Interne / Externe
 <div id="id_opt">
 </div>
 <br>

 <b>Montant à payer :</b>
 <div id="id_price">

 </div>
 <p>

PHP代码

if(!empty($_GET['_sci']))
{
    if ($_SESSION['_nbOpt'] > 0)
    {
        if ($_GET['_sci'] == "Yes")
            $_SESSION['_nbOpt'] += 1;
        else
            $_SESSION['_nbOpt'] -= 1;
    }
    elseif ($_SESSION['_nbOpt'] == 0)
    {
        if ($_GET['_sci'] == "Yes")
            $_SESSION['_nbOpt'] += 1;
    }

    $_priceOpt = $_SESSION['_nbOpt']*5;
    $_priceTotal = 6 + $_priceOpt;

    echo 'Prix matières : 6 € <br>
            Prix matières opt : '.$_priceOpt.' € <br>
            Prix total : '.$_priceTotal.' € <br>';
            ;

}

【问题讨论】：

$('#id_sci').on(...)。 id为id_sci的元素在哪里？
你做了什么调试？您是否检查过浏览器控制台是否存在潜在错误？您是否检查过浏览器网络选项卡（在开发人员工具中）以查看它是否发出请求？
你在php中收到$_GET的数据了吗？
如果我们的问题/cmets 没有得到任何答案，我们很难提供帮助。
对不起，我出去吃饭了。我将尽快对其进行测试。感谢您的回复。

标签： php jquery mysql ajax

【解决方案1】：

您应该使用 ajax GET 来发送数据，如下所示。我认为您的 $_GET 可能没有收到 php 中的数据。更改代码后，清除所有浏览器缓存并检查。

<script>
$(document).ready(function(){
    $('#id_class').on('change', function(){
        var _class = $(this).val();
        if(_class){
            $.ajax({
                type:'GET',
                url:'ajaxData.php',
                data:{'_class':_class},    //changes done here
                success:function(html){
                    $('#id_opt').html(html);
                }
            }); 
        }else{
            $('#id_opt').html('<option value="">Complete CP first</option>');
        }
    });
});

$(document).ready(function(){
    $('#id_sci').on('click change', function(){
        var _sci = $(this).val();
        if(_sci){
            $.ajax({
                type:'GET',
                url:'ajaxDataPrice.php',
                data:{'_sci':_sci},      //changes done here
                success:function(html){
                    $('#id_price').html(html);
                }
            }); 
        }else{
            $('#city').html('<option value="">Complete CP first</option>');
        }
    });
});
</script>

【讨论】：

谢谢，我测试了代码，似乎_sci中存储的值没有传输到ajaxDataPrice.php。当打印 $_GET['_sci'] 的值时，它什么也没给我。
嗨 DroidDev，答案部分有效。 _sci 中存储的值不会传递到第二页。所以处理没有完成。如果你有一个想法，那就太好了。无论如何感谢您的帮助。
@StéphaneMahendravasa 我找不到你，第二页是ajaxDataPrice.php 文件？
是的，就是这样。 'ajaxDataPrice.php' 和上面的代码。
@StéphaneMahendravasa 更正了答案，检查一下。应该是这样的data:{'_sci':_sci}, 而不是data:{'_sci=':_sci},