PHP / MySQL在选择另一个时更改一个下拉菜单

Question

我希望第二个下拉列表出现在第一个下拉列表中（链接2个选择）。怎么做，如果有人可以指导我或给我一个插图，我会很感激！

首先下拉：

<select name="customer">
   <option value="">--</option>
     <?php
       $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
       $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
          while ($cust = mysql_fetch_assoc($sql_result)) {
            echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
</select>

第二次下拉：

<select name="product">
   <option value="">--</option>
     <?php
       $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY product ORDER BY product";
       $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
          while ($row = mysql_fetch_assoc($sql_result)) {
            echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
</select>

Answer 1

首先下拉：

<select name="customer" onchange="this.form.submit()">
   <option value="">--</option>
     <?php
       $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
       $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
          while ($cust = mysql_fetch_assoc($sql_result)) {
            echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
</select>

第二次下拉：

<?php if(isset($_REQUEST['customer'])){ ?>
<select name="product">
   <option value="">--</option>
     <?php
       $sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";
       $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
          while ($row = mysql_fetch_assoc($sql_result)) {
            echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
</select>
<?php } ?>

你可以在第二个下拉列表中添加where条件，查询将是，

$sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";

组合代码：

<form name="demo" action="#">
     <select name="customer" onchange="this.form.submit()">
       <option value="">--</option>
         <?php
           $sql = "SELECT * FROM ".$SETTINGS["data_table"]." GROUP BY customer ORDER BY customer";
           $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
              while ($cust = mysql_fetch_assoc($sql_result)) {
                echo "<option value='".$cust["customer"]."'".($cust["customer"]==$_REQUEST["customer"] ? " selected" : "").">".$cust["customer"]."</option>"; } ?>
    </select>

    <?php if(isset($_REQUEST['customer'])){ ?>
    <select name="product">
       <option value="">--</option>
         <?php
           $sql = "SELECT * FROM ".$SETTINGS["data_table"]." WHERE customer = ".$_REQUEST['customer']." GROUP BY product ORDER BY product";
           $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
              while ($row = mysql_fetch_assoc($sql_result)) {
                echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; } ?>
    </select>
    <?php } ?>
</form>

Answer 2

在页面加载时将第二个下拉列表禁用为：

<select name="product" style="display:none;" id="product">
  .........
</select>

第一个下拉列表的

和onchange事件写入以下函数：

<select name="customer" onchange="showdrop()" id="customer">
.....
</select>

将以下代码用于jquery函数以显示第二个下拉列表：

<script>
function showdrop()
{
     var customer=$("#customer").val();   // get the value of currently selected customer
     $.ajax({
    type:"post",
    dataType:"text",
    data:"customer="+customer,
    url:"products.php",         // page to which the ajax request is passed
    success:function(response)
    {
             $("#product").html(response);   // set the result to product dropdown
     $("#product").show();
    }
})


}
</script>

并创建一个php文件products.php并编写查询以获取与客户相对应的产品（可以根据您的更改）并从那里返回下拉列表。

   <?php
    $customer=$_POST['customer'];
    $sql = "SELECT * FROM ".$SETTINGS["data_table"]." where customer='$customer'";
    $sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
    while ($row = mysql_fetch_assoc($sql_result)) 
    {
                echo "<option value='".$row["product"]."'".($row["product"]==$_REQUEST["product"] ? " selected" : "").">".$row["product"]."</option>"; 
    } 
    exit;
    ?>

Answer 3

试试这个：

$("#customer").change(function(){

$("#product").show();

});

或者在更改动态

时向第二个添加选项

$("#customer").change(function(){

//get dynamically option for product by ajax or array
    var customer = $("#product");
    $('<option>', { 
             value: "example",
             text: "example"
        }).appendTo(customer);

    });

Checkout Fiddle

Answer 4

如果您想使用纯JavaScript，可以使用以下方法。

除了其他jquery答案之外，您还需要检查客户是否为空，因为您需要隐藏product元素，以防用户再次选择空选项。

更新你的select元素以调用javascript函数。

<select name="customer" id="customer" onchange="showProducts()"></select>

默认隐藏产品选择。

<select name="product" id="product" style="display: none">

创建javascript函数。

<script>
function showProducts() {

    var customer = document.getElementById('customer').options[e.selectedIndex].value;
    var product  = document.getElementById('product');

    if (customer != '')
        product.style.display = 'block';
    else
        product.style.display = 'none';
}
</script>