时间戳

首页 > 解决方案 > 具有多个 .onchange 的相关下拉列表

javascript - 具有多个 .onchange 的相关下拉列表

问题描述

我正在开发一个搜索系统，在该系统中会提示用户在index.php. 我让用户选择第一个下拉列表，然后第二个、第三个和第四个下拉值的值更改为与第一个下拉列表相关的值。我正在使用_POST来获取onchange值并将数据显示到下拉列表的其余部分。我也做了同样的事情，如果用户在初始搜索中选择第二个下拉菜单，则第一个、第三个和第四个值会更改为与所选下拉菜单相关的值。我已经为所有的下拉菜单做了这个。该系统正在运行，但是有没有更好的方法来做到这一点，而不是拥有多个_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;

    }

    ?>

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

标签： javascriptphpjqueryyii2-advanced-app

解决方案

首先通过使用事件处理程序来减少jquery代码class，使用数据类型属性来传递类型。

<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 注入。

推荐阅读