根据第一个选择框填充第二个选择框的选项。两者都是PHP数组

时间：2013-11-28 12:53:17

标签： php mysql

我的数据库中有两个名为客户和船只的innoDB表。我还有一个包含2个选择框的表单，其中一列包含： company_name 表：客户作为选项，另一个包含列： vessel_name 表：船。

我想要做的是根据在第一个选择框中选择的客户的company_name填充第二个选择框的选项。

最后请注意我是Javascript和jQuery的完全新手，这就是为什么我在这里问我如何才能达到上述结果。

表格：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

        <form name="ypo" method="post">

        <select name="company_name">
        <?php
        foreach($pelates as $pelend) {
            ?>
            <option value="<?php echo $pelend->company_name; ?>"><?php echo $pelend->company_name; ?></option>
        <?php
        }
            ?>
        </select>


        <select name="vessel">
        <?php
        foreach($ploia as $end) {
            ?>
            <option value="<?php echo $end->vessel_name; ?>"><?php echo $end->vessel_name; ?></option>
        <?php
        }
            ?>
        </select>

    </form>

    </body>
    </html>

用于使上述表单工作的php：

    <?php

// For customers
$sqlpelates = "SELECT * FROM customers ORDER BY company_name";

if($pelat = $db->query($sqlpelates)) {

$pelates = array();

    while($pelate = $pelat->fetch_object()) {
        $pelates[] = $pelate;
    }

$pelat->free();

}

// For vessels
$sqlploia = "SELECT * FROM vessels ORDER BY vessel_name";

if($plo = $db->query($sqlploia)) {

$ploia = array();

    while($ploi = $plo->fetch_object()) {
        $ploia[] = $ploi;
    }

$plo->free();

}

?>

更新：下面是我尝试实现上述结果的单个.php页面：

<?php

require 'db/connect.php';
//check if this is an ajax call
$ajax = isset($_POST['ajax']) ? $_POST['ajax'] : false;
if (!$ajax) {
  // if not then this is a fresh page that needs everything
  $sqlpelates = "SELECT * FROM customers ORDER BY company_name";
  if ($pelat=$db->query($sqlpelates)) {
    $pelates = array();
    while($pelate=$pelat->fetch_object()) $pelates[] = $pelate;
    $pelat->free();
  }
}
// modify the query to filter out only what your ajax request wants
$where = $ajax ? ' WHERE company_name="'.$_POST['companyName'].'"' : '';
// you need to make sure to escape the incoming variable $_POST['company_name']
$sqlploia = 'SELECT * FROM vessels'.$where.' ORDER BY vessel_name';
if ($plo=$db->query($sqlploia)) {
  $ploia = array();
  while($ploi=$plo->fetch_object()) $ploia[] = $ploi;
  $plo->free();
}
// the secret sauce... and some very bad programming, this should be done some other way
if ($ajax) {
  // set the type, so the client knows what the server returns
  header('Content-Type: application/json');
  // output what the client asked for: an array of vessels in JSON format
  echo json_encode($ploia);
  // kill the script, this is all the client wants to know
  exit;
}



?>  

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script src="jquery.js">

// Your code goes here.
// jQuery must be loaded already
$(function(){
  var
    // put the target php script
    url = 'http://prinseapals-marine.com/filing/drop_down.php',
    form=$('form[name="ypo"]'), company, vessels;
  company = {
    // I prefer using native DomElements sometimes
    selectBox : $(form).find('select[name="company_name"]')[0],
    onSelect : function () {
      var
        idx = company.selectBox.selectedIndex,
        data;
      // if user selected an empty option, clear and return
      if (idx === -1) {vessels.clearBox();return;}
      // setup the data 
      data = {"ajax":1,"company_name":company.selectBox[idx].value};
      // your script now has $_GET['ajax'], $_GET['company_name']
      $.post(url,data,vessels.fillBox,'json');
      // vessels.fillbox will be executed when your php script returns
    }
  };
  vessels = {
    // I prefer using native DomElements sometimes
    selectBox : $(form).find('select[name="vessel"]')[0],
    // a handy method for clearing options
    clearBox : function () {$(this.selectBox).empty()},
    // called upon completion of the ajax request
    fillBox : function (arrayOfVessels) {
      // clear current contents
      $(this.selectBox).empty();
      // for each element in the array append a new option to the vessel selector
      arrayOfVessels.forEach(function(v){
        $(vessels.selectBox).append('<option value="'+v+'">'+v+'</option>');
      });
    }
  };
  // add a listener to the company selector
  $(company.selectBox).change(company.onSelect);
});
</script>


        <form name="ypo" method="post">

        <select name="company_name">
        <?php
        foreach($pelates as $pelend) {
            ?>
            <option value="<?php echo $pelend->company_name; ?>"><?php echo $pelend->company_name; ?></option>
        <?php
        }
            ?>
        </select>


        <select name="vessel">
        <?php
        foreach($ploia as $end) {
            ?>
            <option value="<?php echo $end->vessel_name; ?>"><?php echo $end->vessel_name; ?></option>
        <?php
        }
            ?>
        </select>

    </form>

    </body>

最终更新：

test.php的：

<?php

require 'db/connect.php';
$cus = array();
if($cterm = $db->query("SELECT * FROM `customers`")) {
    while($cterm2 = $cterm->fetch_object()) {
        $cus[] = $cterm2;
    }
}

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>

<form id="form1" name="myform"> 
    <select name="selection" onchange="load('bdiv', 'test2.php');">
    <?php
    foreach($cus as $c) {
    ?>
    <option value="<? echo $c->company_name ?>"><? echo $c->company_name ?></option>
    <?php
    }
    ?>
    </select>

    <div id="bdiv"></div>
</form>

</body>
</html>

test.js：

function load (thediv, thefile) {
    // body...
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById(thediv).innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open('GET', thefile+'?selection='+document.myform.selection.value, true);
    xmlhttp.send();


}

test2.php：

<?php

require 'db/connect.php';

if (isset($_GET['selection'])) {
    # code...
    $selection = $_GET['selection'];
}

$ves = array();
    if ($vterm = $db->query(
        "SELECT `vessel_name` FROM `vessels` WHERE `company_name` = '$selection'")) {
        while ($vterm2 = $vterm->fetch_object()) {
            $ves[] = $vterm2;
        }

    } else {
    echo 'Please type a customer name.';
    }
?>

<select>
    <?php
    foreach($ves as $v) {
    ?>
    <option value="<?php echo $v->vessel_name ?>" ><?php echo $v->vessel_name ?></option>
    <?php
    }
    ?>
</select>

2 个答案:

答案 0 :(得分：1)

这不是我第一次看到这个问题，但我会潜入

警告：这个答案有javascript和jQuery。之后我还会添加一个php文件并进行一些更改，以允许为ajax请求调用相同的脚本

// jQuery must be loaded already
$(function(){
  var
    // put the target php script
    url = 'http://localhost/test/stackoverflow.php',
    form=$('form[name="ypo"]'), company, vessels;
  company = {
    // I prefer using native DomElements sometimes
    selectBox : $(form).find('select[name="company_name"]')[0],
    onSelect : function () {
      var
        idx = company.selectBox.selectedIndex,
        data;
      // if user selected an empty option, clear and return
      if (idx === -1) {vessels.clearBox();return;}
      // setup the data 
      data = {"ajax":1,"company_name":company.selectBox[idx].value};
      // your script now has $_GET['ajax'], $_GET['company_name']
      $.post(url,data,vessels.fillBox,'json');
      // vessels.fillbox will be executed when your php script returns
    }
  };
  vessels = {
    // I prefer using native DomElements sometimes
    selectBox : $(form).find('select[name="vessel"]')[0],
    // a handy method for clearing options
    clearBox : function () {$(this.selectBox).empty()},
    // called upon completion of the ajax request
    fillBox : function (arrayOfVessels) {
      // clear current contents
      $(this.selectBox).empty();
      // for each element in the array append a new option to the vessel selector
      arrayOfVessels.forEach(function(v){
        $(vessels.selectBox).append('<option value="'+v+'">'+v+'</option>');
      });
    }
  };
  // add a listener to the company selector
  $(company.selectBox).change(company.onSelect);
});

js代码背后的逻辑是允许用户交互。当用户做出选择时，会向服务器触发请求，并在客户端处理响应并填充您的第二个<select>

现在，您的php脚本的 已修改 版本（警告：这适用于我接下来附加的模板）

<?php
// your model, check for whitespaces outside php tags, do not allow output yet
require 'db/connect.php';
// check if this is an ajax call
$ajax = isset($_POST['ajax']) ? $_POST['ajax'] : false;
if (!$ajax) {
  // required for the template
  $pelates = array();
  // if not then this is a fresh page that needs everything
  $sqlpelates = "SELECT * FROM customers ORDER BY company_name";
  if ($pelat=$db->query($sqlpelates)) {
    while($pelate=$pelat->fetch_object()) $pelates[] = $pelate;
    $pelat->free();
  }
} else {
  // modify the query to filter out only what your ajax request wants
  $where = ' WHERE company_name="'.$_POST['companyName'].'"';
  // required for the ajax request
  $ploia = array();
  // you need to make sure to escape the incoming variable $_POST['company_name']
  $sqlploia = 'SELECT * FROM vessels'.$where.' ORDER BY vessel_name';
  if ($plo=$db->query($sqlploia)) {
    while($ploi=$plo->fetch_object()) $ploia[] = $ploi;
    $plo->free();
  }
  // the secret sauce... and some very bad programming, this should be done some other way
  // set the type, so the client knows what the server returns
  header('Content-Type: application/json');
  // output what the client asked for: an array of vessels in JSON format
  echo json_encode($ploia);
  // kill the script, this is all the client want's to know
  exit;
}
?>

接下来是html模板的修改版本

<!DOCTYPE html>
<html>
  <head>
    <title>Your title</title>
  </head>
  <body>
    <form name="ypo" method="post">
      <select name="company_name"><?php
        foreach($pelates as $p) echo '<option value="'.$p->company_name.'">'.$p->company_name.'</option>';
      ?></select>
      <!-- leave empty, we will populate it when the user selects a company -->
      <select name="vessel"></select>
    </form>
    <!-- add jQuery lib here, either your own or from a CDN; this is google's version 2.0.3 -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- The code should be in a seperate file, load here if you want (but after jQuery lib) -->
    <script src="your/javascript/file.js"></script>
  </body>
</html>

好的，现在有些指针

  • 你应该小心我留在那里的php脚本，还有其他方法可以做我想做的更干净，更容易维护的方法
  • javascript不是最好的，有更好的解决方案，所以一定要检查出来
  • 如果您不理解任何脚本的部分，请不要犹豫，
  • 小心任何空白，不要在php脚本之前允许任何输出，这一点非常重要。所有输出都应留给模板

我希望这是有帮助的

答案 1 :(得分：0)

使用ajax，将您的公司ID传递给javascript 

<script>
function showCustomer(str)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myresult").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test.php?q="+str,true); // Pass value to another page Here->test
xmlhttp.send();
}
</script>

<select name="company_name" onchange="showCustomer(this.value)">
    <?php
    foreach($pelates as $pelend) {
        ?>
        <option value="<?php echo $pelend->company_name; ?>"><?php echo $pelend->company_name; ?></option>
    <?php
    }
        ?>
    </select>

<div id="myresult">


</div>

Now on test.php Simply Call Value＆amp;把选择框，

<?php
$q = $_GET['q'];

// Here fetch values for particular q(company name)

// put select box
相关问题
最新问题