Question

我想根据另一个选定的组合框选项填充组合框选项请记住，我在同一页面中有PHP代码

    <select name="idcataloguectg" class="form-control" id="idcataloguectg">
    <!--  PHP CODE ##################################### -->
    <?php
    try
    {
    $pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8', 'root', '');// connection to the server and DB
        }
        catch (Exception $e)
        {
                die('Erreur : ' . $e->getMessage());// if error
        }
        $respond = $pdo->query('SELECT * FROM catalogue');// my request

        while ($data = $respond->fetch())// fetch into the table
        {
        ?>
        <!--  PHP CODE ##################################### -->
<option value="<?php echo $data['0']; ?>"><?php echo $data['1']; ?></option>
        <!--  PHP CODE ##################################### -->
        <?php
        }
        $respond->closeCursor(); // end of request
        ?>
        <!--  PHP CODE ##################################### -->
    </select>
    <label>Categorie</label><br>
    <select name="idcategorief" class="form-control" id="idcategorief">
        <!--  PHP CODE ##################################### -->
        <?php
        $idcataloguectg = $_GET['idcataloguectg'];
        try
        {
        $pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8', 'root', '');// connection to the server and DB
        }
        catch (Exception $e)
        {
                die('Erreur : ' . $e->getMessage());// if error
        }
        $respond = $pdo->query('SELECT * FROM categorie WHERE id_categorie='.$idcataloguectg.'');// my request

        while ($data = $respond->fetch())// fetch into the table
        {
        ?>
        <!--  PHP CODE ##################################### -->
<option value="<?php echo $data['0']; ?>"><?php echo $data['2']; ?></option>
        <!--  PHP CODE ##################################### -->
        <?php
        }
        $respond->closeCursor(); // end of request
        ?>
        <!--  PHP CODE ##################################### -->
</select>

我试图搜索示例，但我发现他们使用外部php文件填充选项，但在我的示例中我将所有这些都放在同一页面中所以我能做些什么你能给我一个ajax脚本

吗？

Answer 1

要使第二个select字段相应更改，您需要在用户更改类别选择字段的值时重新加载页面。为此，请将选择标记更改为

<select name="idcataloguectg" class="form-control" id="idcataloguectg" onChange="window.location.href = '/?idcataloguectg=' + this.value">

这会将网址更改为同一网站（您可能需要将/替换为您的php文件的名称），但正确设置了idcataloguectg GET参数。

如果您这样做，您可能还想将类别的选项行更改为

<option value="<?php echo $data['0']; ?>" <?php if ($_GET['idcataloguectg'] == $data['0']) { ?> selected <?php } ?>><?php echo $data['1']; ?></option>

因此，当通过GET参数选择类别时，会选择正确的选项，而不是默认的（第一个）选项。

但是重新加载整个页面并不是一个好主意，而是应该使用ajax，但是这需要您将第二个select标记的逻辑放在另一个文件中，例如{{ 1}}。该文件应包含以下内容（代码的那部分将被主要从主文件中删除）：

category.php

然后将第一个 <?php $idcataloguectg = $_GET['idcataloguectg']; try { $pdo = new PDO('mysql:host=localhost;dbname=mywsite_db;charset=utf8', 'root', '');// connection to the server and DB } catch (Exception $e) { die('Erreur : ' . $e->getMessage());// if error } $respond = $pdo->query('SELECT * FROM categorie WHERE id_categorie='.$idcataloguectg.'');// my request while ($data = $respond->fetch())// fetch into the table { ?>  <option value="<?php echo $data['0']; ?>"><?php echo $data['2']; ?></option>  <?php } $respond->closeCursor(); // end of request ?> 标记更改为

select

该脚本使用jQuery并将请求发送到新的php文件<select name="idcataloguectg" class="form-control" id="idcataloguectg" onChange="$.get('category.php?idcataloguectg=' + this.value, function(data){$('#idcategorief').html(data);});">，其类别ID为category.php参数。当请求成功返回选项时，它们位于第二个GET标记内，替换之前的内容。

这样做的好处是每次只发送所需的数据，大大减少了所需的流量和计算。

编辑：

我将js放在select标记的onChange属性中。每次选定的值更改时，都会执行此代码。您还可以将代码放在函数内的脚本标记或文件中，然后在属性中执行该函数。我使用jQuery的select函数进行ajax调用，这是$.get函数的简写，语法简单。阅读here和here。

我使用的脚本如下：

$.ajax

它启动对文件“category.php”的$.get( 'category.php?idcataloguectg=' + this.value, function(data){ $('#idcategorief').html(data); } ); ajax请求，并设置了get参数GET，并在成功时定义了一个回调函数，该函数获取响应数据并替换了内部的第二个选择标签。但最好像这样写：

idcataloguectg

这样做相同，但定义了对象中的参数，这些参数更易读，也适用于$.get( 'category.php', { idcataloguectg: $('#idcataloguectg').val() }, function(data){ $('#idcategorief').html(data); } );个请求。另外，我使用基于POST的jQuery选择器替换了this，因为有时候id可能很糟糕，所以这样更安全。

如果你想要三个选择标签，第一个可以保持不变，第二个脚本（由第二个this标签的onChange属性调用）需要看起来像这样：

select

将$.get( 'second.php', { valueSelectOne: $('#idOfFirstSelectTag').val(), valueSelectTwo: $('#idOfSecondSelectTag').val() }, function(data){ $('#idThirdSelectTag').html(data); } );替换为您的php文件的名称，该文件返回第三个输入字段的值和相应的id。如果你不理解与second.php相关的东西，你应该阅读jQuery。

希望这有帮助。

如何根据ajax的其他选定组合框值填充一个组合框

1 个答案: