有多个.onchange

Question

我正在使用一个搜索系统，该系统在index.php上向用户显示4个下拉菜单。我要求用户选择第一个下拉列表，然后将第二，第三和第四下拉列表的值更改为与第一个下拉列表相关的值。我正在使用_POST来获取onchange值并将数据显示到其余的下拉菜单中。我也做了同样的事情，如果用户在初始搜索中选择了第二个下拉列表，则第1，第3和第4个值将更改为与所选下拉列表相关的值。我已经完成了所有下拉菜单。系统正在运行，但是有比拥有多个_POST和.onchange值更好的方法了吗？

这是下拉菜单的脚本：

      $(document).ready(function(){

/////start commodity post
$('#pfcommodity').on('change', function(){
var pfcommodity =  $(this).val();
 if(pfcommodity){

$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfcategory",
 data:'pfcommodity='+pfcommodity,
success: function(data)
    {
       //console.log(data);
          $("#pfcategory").html(data);       
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pforigin",
 data:'pfcommodity='+pfcommodity,
success: function(data)
    {       
        $("#pforigin").html(data);        
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfmanufacture",
 data:'pfcommodity='+pfcommodity,
success: function(data)
    {       
        $("#pfmanufacture").html(data);        
    }
});

}
});////close commodity post


////open category post
$('#pfcategory').on('change', function(){
var pfcategory =  $(this).val();
 if(pfcategory){

$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfcategory",
 data:'pfcategory='+pfcategory,
success: function(data)
    {
       //console.log(data);
          $("#pfcommodity").html(data);       
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pforigin",
 data:'pfcategory='+pfcategory,
success: function(data)
    {       
        $("#pforigin").html(data);        
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfmanufacture",
 data:'pfcategory='+pfcategory,
success: function(data)
    {       
        $("#pfmanufacture").html(data);        
    }
});



}
});////close category post

// ////open origin post
$('#pforigin').on('change', function(){
var pforigin =  $(this).val();
 if(pforigin){

$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfcategory",
 data:'pforigin='+pforigin,
success: function(data)
    {
       //console.log(data);
          $("#pfcommodity").html(data);       
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pforigin",
 data:'pforigin='+pforigin,
success: function(data)
    {       
        $("#pfcategory").html(data);        
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfmanufacture",
 data:'pforigin='+pforigin,
success: function(data)
    {       
        $("#pfmanufacture").html(data);        
    }
});


}
});////close origin post

// ////open manufacure post
$('#pfmanufacture').on('change', function(){
var pfmanufacture =  $(this).val();
 if(pfmanufacture){

$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfcategory",
 data:'pfmanufacture='+pfmanufacture,
success: function(data)
    {
       //console.log(data);
          $("#pfcommodity").html(data);       
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pforigin",
 data:'pfmanufacture='+pfmanufacture,
success: function(data)
    {       
        $("#pfcategory").html(data);        
    }
});
$.ajax({
method: "POST",
url: "/import-conditions/processfood/pfmanufacture",
 data:'pfmanufacture='+pfmanufacture,
success: function(data)
    {       
        $("#pforigin").html(data);        
    }
});


}
});////close manufacture post



});

这是第一个查询pfcategory.php

<?php
    if (isset($_POST['pfcommodity'])){  

    $connect=mysqli_connect("localhost","root","","import-conditions");
    $output='';

    $sql="SELECT DISTINCT category FROM processfood WHERE commodity = '".$_POST["pfcommodity"]."'";
    $result=mysqli_query($connect,$sql);
     $output.='<option value="">Select Category</option>';



    while ($row=mysqli_fetch_array($result)) {
        $output.='<option value="">'.$row["category"].'</option>';   

      }

    echo $output;

        }

        if (isset($_POST['pfcategory'])){   

    $connect=mysqli_connect("localhost","root","","import-conditions");
    $output='';

    $sql="SELECT DISTINCT commodity FROM processfood WHERE category = '".$_POST["pfcategory"]."'";
    $result=mysqli_query($connect,$sql);
     $output.='<option value="">Select Commodity</option>';



    while ($row=mysqli_fetch_array($result)) {
        $output.='<option value="">'.$row["commodity"].'</option>';   

      }

    echo $output;

        }

        if (isset($_POST['pforigin'])){ 

    $connect=mysqli_connect("localhost","root","","import-conditions");
    $output='';

    $sql="SELECT DISTINCT commodity FROM processfood WHERE origin = '".$_POST["pforigin"]."'";
    $result=mysqli_query($connect,$sql);
     $output.='<option value="">Select Commodity</option>';



    while ($row=mysqli_fetch_array($result)) {
        $output.='<option value="">'.$row["commodity"].'</option>';   

      }

    echo $output;

        }

        if (isset($_POST['pfmanufacture'])){    

    $connect=mysqli_connect("localhost","root","","import-conditions");
    $output='';

    $sql="SELECT DISTINCT commodity FROM processfood WHERE manufacture = '".$_POST["pfmanufacture"]."'";
    $result=mysqli_query($connect,$sql);
     $output.='<option value="">Select Commodity</option>';



    while ($row=mysqli_fetch_array($result)) {
        $output.='<option value="">'.$row["commodity"].'</option>';   

      }

    echo $output;

        }

        ?>

这是pforigin.php

<?php
$connect=mysqli_connect("localhost","root","","import-conditions");
$output='';

if (isset($_POST['pfcommodity'])){  
$sql="SELECT DISTINCT origin FROM processfood WHERE commodity = '".$_POST["pfcommodity"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Country of Origin</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["origin"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pfcategory'])){   

$sql="SELECT DISTINCT origin FROM processfood WHERE category = '".$_POST["pfcategory"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Country of Origin</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["origin"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pforigin'])){ 

$sql="SELECT DISTINCT category FROM processfood WHERE origin = '".$_POST["pforigin"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Category</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["category"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pfmanufacture'])){    

$sql="SELECT DISTINCT category FROM processfood WHERE manufacture = '".$_POST["pfmanufacture"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Category</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["category"].'</option>';   

  }

echo $output;

    }

    ?>

这是pfmanufacture.php

<?php
$connect=mysqli_connect("localhost","root","","import-conditions");
$output='';

if (isset($_POST['pfcommodity'])){  

$sql="SELECT DISTINCT manufacture FROM processfood WHERE commodity = '".$_POST["pfcommodity"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Manufacture</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["manufacture"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pfcategory'])){   

$sql="SELECT DISTINCT manufacture FROM processfood WHERE category = '".$_POST["pfcategory"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Manufacture</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["manufacture"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pforigin'])){ 

$sql="SELECT DISTINCT manufacture FROM processfood WHERE origin = '".$_POST["pforigin"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Manufacture</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["manufacture"].'</option>';   

  }

echo $output;

    }

    if (isset($_POST['pfmanufacture'])){    

$sql="SELECT DISTINCT origin FROM processfood WHERE manufacture = '".$_POST["pfmanufacture"]."'";
$result=mysqli_query($connect,$sql);
 $output.='<option value="">Select Country of Origin</option>';
while ($row=mysqli_fetch_array($result)) {
    $output.='<option value="">'.$row["origin"].'</option>';   

  }

echo $output;

    }

    ?>

所有其他页面都遵循相同的模式。到目前为止，它没有问题，但是有更好的方法吗？

Answer 1

首先通过为事件处理程序使用class来减少jquery的代码，并使用data-type属性传入类型。

<select class="pf_select" data-type="commodity">
    <option value="">Select Category</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
<select>

这样做，您可以删除其中一个除外的所有jquery调用，只需稍作更改即可。

$('.pf_select').on('change', function() {
    var elm = $(this);
    var type = elm.data('type');
    var commodity = elm.val();

    if (commodity !== '') {

        $.ajax({
            method: "POST",
            url: "/import-conditions/processfood/pfcategory",
            data: 'pf' + type + '=' + commodity,
            success: function(data) {
                elm.html(data);
            }
        });
        $.ajax({
            method: "POST",
            url: "/import-conditions/processfood/pforigin",
            data: 'pf' + type + '=' + commodity,
            success: function(data) {
                elm.html(data);
            }
        });
        $.ajax({
            method: "POST",
            url: "/import-conditions/processfood/pfmanufacture",
            data: 'pf' + type + '=' + commodity,
            success: function(data) {
                elm.html(data);
            }
        });
    }
});

现在使用PHP：

您只需要连接一次数据库，因此只需将其放在顶部即可。

然后，在调用之间进行的所有更改就是表名和POST变量键。因此，您可以轻松地将数据库调用和html呈现器包装到一个函数中并传递变量。

然后，您只需在if语句中调用该函数即可。

<?php
$connect = mysqli_connect("localhost","root","","import-conditions");

function pf_select($key, $select_label = 'Select Category') {
    global $connect;

    $stmt = $connect->prepare('
        SELECT DISTINCT category 
        FROM processfood 
        WHERE '.$key.' = ?');

    $stmt->bind_param('s', $_POST['pf'.$key]);

    $stmt->execute();

    $result = $stmt->get_result();

    $output = '<option value="">'.$select_label.'</option>';
    while ($row = $result->fetch_assoc()) {
        $output .= '<option value="'.$row["category"].'">'.$row["category"].'</option>';   
    }

    return $output;
}

if (isset($_POST['pfcommodity'])) { 
    exit(pf_select('commodity', 'Select Category'));
}

if (isset($_POST['pfcategory'])) { 
    exit(pf_select('category', 'Select Commodity'));
}

if (isset($_POST['pforigin'])) { 
    exit(pf_select('origin', 'Select Commodity'));
}

if (isset($_POST['pfmanufacture'])) { 
    exit(pf_select('manufacture', 'Select Commodity'));
}

更具可读性和可管理性。

注意：我没有添加数据库错误检查，无论如何都应该添加它，并请阅读防止SQL注入的内容。