Question

在Web窗体中有两个下拉列表。第二个列表项应根据第一个下拉列表中选定的值动态更改。

这就是为什么我试图做到这一点：

的index.php：

...

<script> 
function getClient(val) { 

    $.ajax({ 
    type: "POST", 
    url: "get_contacts.php", 
    data:'client_id='+val, 
    success: function(data){ 
     $("#contacts-list").html(data); 
    } 
    }); 
} 
</script> 

...

<div class="form-group"> 
     <label for="mto_client" class="col-sm-2 control-label">MTO Client</label> 
     <div class="col-sm-10"> 
    <select name="mto_client" id="clients_list" onChange="getClient(this.value)"> 
    <option value="">Select a Client</option> 
      <?php 
do { 
?> 
      <option value="<?php echo $row_RSClients['id_client']?>" ><?php echo $row_RSClients['client_name']?></option> 
      <?php 
} while ($row_RSClients = mysql_fetch_assoc($RSClients)); 
?> 
      </select> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="mto_client_contact" class="col-sm-2 control-label">MTO Client Contact</label> 
     <div class="col-sm-10"> 

        <select name="state" id="contacts-list"> 
      <option value="">Select Client Contact</option> 
      </select> 


     </div> 
     </div> 

get_contacts .php

<?php 
require_once("dbcontroller.php"); 
$db_handle = new DBController(); 

if(!empty($_POST["client_id"])) { 
    $query ="SELECT * FROM tb_client_contacts WHERE contact_client_id = '" . $_POST["client_id"] . "'"; 
    $results = $db_handle->runQuery($query); 
?> 
    <option value="">Select Client Contact</option> 
<?php 
    foreach($results as $state) { 
?> 
    <option value="<?php echo $state["id_client_contact"]; ?>"><?php echo $state["contact_name"]; ?></option> 
<?php 
    } 
} 
?> 

表tb_clients_contact上有满足条件的对象，但第二个下拉列表不显示任何对象。

任何帮助，欢迎。

Answer 1

而不是

$("#contacts-list").html(data); 

应该

$('#contacts-list').empty().append(data); 

empty()将清除第一contacts-list选择字段中的选项，然后append()将插入您的AJAX的结果的选项。

您还可以查看控制台日志以查找错误。如果您使用的是谷歌浏览器，请点击F12以显示控制台日志。