如何填写基于一个组合框阿贾克斯

Question

我要填写基于另一种选择组合框的选项 组合框选项的其他选择的组合框的值记住，我在同一个页面

<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代码

我试图搜索的例子，但所有我发现他们使用外部的PHP文件，填充选项，但在我的例子中，我把他们全部在同一页 所以我能做什么 你可以给我的AJAX脚本

Answer 1

对于第二个select字段改变按照y，当用户更改类别选择字段的值时，您需要重新加载页面。要做到这一点，改变选择标签

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

这将网址更改为相同的网站（您可能需要与你的PHP文件的名称来代替/），但与idcataloguectgGET参数正确设置。

如果你这样做，你可能也想为类别选项行更改为

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

这样当通过GET参数选择一个类别，右边的选项被选中，而不是默认（第一）一个。

---

但它不是重新加载整个页面是一个好主意，而应该用Ajax做，但requieres你把逻辑在另一个文件中的第二select标记，例如category.php。该文件应包含以下（该代码的部分将obiously从主文件中删除）：

<!-- 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标签然后换

<select name="idcataloguectg" class="form-control" id="idcataloguectg" onChange="$.get('category.php?idcataloguectg=' + this.value, function(data){$('#idcategorief').html(data);});"> 

该脚本使用jQuery和发送请求到新的php文件category.php，分类标识为GET参数。当请求成功返回选项时，它们位于第二个select标记内，取代之前的内容。

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

编辑：

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

我使用的脚本如下：

$.get(
    'category.php?idcataloguectg=' + this.value, 
    function(data){ 
     $('#idcategorief').html(data); 
    } 
); 

它启动的GET Ajax请求文件“category.php”用get参数idcataloguectg集并定义成功的回调函数，该函数的响应数据并用它替换第二个选择标签的innerhtml。 但最好是这样写：

$.get(
    'category.php', 
    { 
     idcataloguectg: $('#idcataloguectg').val() 
    }, 
    function(data){ 
     $('#idcategorief').html(data); 
    } 
); 

这并不相同，但定义的参数中的对象，这是更具可读性和还与POST请求。另外，我用基于id的jQuery选择器替换了this，因为this有时可能很麻烦，所以这样更安全。

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

$.get(
    'second.php', 
    { 
     valueSelectOne: $('#idOfFirstSelectTag').val(), 
     valueSelectTwo: $('#idOfSecondSelectTag').val() 
    }, 
    function(data){ 
     $('#idThirdSelectTag').html(data); 
    } 
); 

用您的php文件的名称替换second.php，该文件返回第三个输入字段的值以及相应的ID。如果你不明白与$相关的东西，你应该阅读jQuery。

希望这会有所帮助。