Question

我在表单中有2个选择。第二个选择总共约有2000行来自我的mysql表。进入该mysql的列之一具有用于第一个选择的1个值。我希望能够在第一个选择中选择该值时对其进行过滤，以便它只显示这些文章。

现在代码：

<div class="rmaform">
   <select name="discipline" class="discipline">
      <option value="&nbsp;" selected></option>
      <option value="access">ACCESS</option>
      <option value="inbraak">INBRAAK</option>
      <option value="brand">BRAND</option>
      <option value="cctv">CCTV</option>
      <option value="airphone">AIRPHONE</option>
      <option value="perimeter">PERIMETER</option>
   </select>
</div>             
<div class="rmaform">
<select name="article" class="input-article">
   <?php
      $articleselect = $dbh->prepare('SELECT * FROM articles');
      $articleselect->execute();
         while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
   ?>
      <option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
   <?php
      }
   ?>
</select>

我想我必须使用Javascript但是你如何结合PHP和Javascript？什么是使过滤器工作的最佳方法？

Answer 1

jQuery用于更改事件和AJAX

$(document).ready(function(e) {
    $('select.discipline').change(function(e) { // When the select is changed
        var sel_value=$(this).val(); // Get the chosen value
        $.ajax(
        {
            type: "POST",
            url: "ajax.php", // The new PHP page which will get the option value, process it and return the possible options for second select
            data: {selected_option: sel_value}, // Send the slected option to the PHP page
            dataType:"HTML",
            success: function(data)
            {
                $('select.input-article').append(data); // Append the possible values to the second select
            }
        });
    });
});

在你的AJAX.php中

<?php
if(isset($_POST['selected_option']))
    $selected_option=filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
else exit(); // No value is sent

$query="SELECT * FROM articles WHERE discipline='$selected_option'"; // Just an example. Build the query as per your logic

// Process your query

$options="";
while($query->fetch()) // For simplicity. Proceed with your PDO
{
    $options.="<option value='option_value'>Text for the Option</option>"; // Where option_value will be the value for you option and Text for the Option is the text displayed for the particular option
}
echo $options;
?>

注意：您也可以使用JSON而不是HTML来简化。阅读here，了解如何。

Answer 2

首先给两个选择一个唯一的ID ......

<div class="rmaform">
   <select name="discipline" class="discipline" id="discipline">
      <option value="" selected></option>
      <option value="access">ACCESS</option>
      <option value="inbraak">INBRAAK</option>
      <option value="brand">BRAND</option>
      <option value="cctv">CCTV</option>
      <option value="airphone">AIRPHONE</option>
      <option value="perimeter">PERIMETER</option>
   </select>
</div> 
<div class="rmaform">
<select name="article" class="input-article" id="article">
   <option value="" selected></option>
</select>

现在，您可以对另一个文件使用jQuery Ajax调用，并从该文件中获取HTML响应，并在选择字段中填充id =＆＃34; article＆＃34;像这样...

<script type="text/javascript">
$(document).ready(function(){
  $("#discipline").change(function(){
    var discipline = $(this).val();
    $.post(
      "ajax_load_articles.php",
      {discipline : discipline},
      function(data){
        $("#article").html(data);
      }
    )
  });
});
</script>

现在在html文件所在的同一目录中创建一个像ajax_load_articles.php ...这样的新文件...你可以将它放在任何地方，但是你必须将$.post("url",网址更改为ajax提交

ajax_load_articles.php的内容：

<?php  
$discipline = $_POST["discipline"];
$articleselect = $dbh->prepare("SELECT * FROM articles WHERE colname = '{$discipline}'");
$articleselect->execute();
echo '<option value="" selected></option>';
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
  <option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
  }
?>

现在，当您更改第一个选择字段的选择时，将发生Ajax调用，第二个选择字段的数据将自动调整为在第一个选择字段中选择的相关数据。

Answer 3

这是一个例子，你可以选择特定于该州的大学..

<强> form.php的

// your code for form ... 

// select box for state starts
<div class="form-group">
  <label for="select" class="col-lg-2 col-md-2 control-label">State</label>
  <div class="col-lg-10 col-md-10">
    <select class="form-control input-sm" name="statename" id="stateid">
      <option value="">---- Select ----</option>
      <?php 

                        $state=sql::readResultArray("Your Query To select State`");
                        foreach($state as $s){
                            ?>
      <option  value="<?php echo $s?>"> <?php echo $s ?> </option>
      <?php
                            }
                        ?>
    </select>
  </div>
</div>
<div class="form-group">
  <label for="select" class="col-lg-2 col-md-2 control-label">Colleges</label>
  <div class="col-lg-10 col-md-10">
    <select class="form-control input-sm" name="mycollegename">
      <option value="">--- Select --- </option>
    </select>
  </div>
</div>

// further code for from in form.php..

找到状态的脚本，然后传递值以查找该州的相应学院

<script>

        $(document).ready(function(e) {
        $('#stateid').change(function()
                {   ids=$('#stateid').val();
                    $.get('mycollege.php', {type:ids} ,function(msg){
                                $('select[name="mycollegename"]').html(msg);
                            });
                });
    });
     </script>

通过ajax调用此文件..此文件上的代码

<强> mycollege.php

 <?php 

require('db.php'); // call all function required, db files or any crud files

$type=$_GET['type'];

if(!empty($type)){

$r=sql::read("Your Query To call all teh college list");

?>

<select name="mycollegename">
  <option value="">Select One</option>
  <?php 

        foreach($r as $r){

            echo "<option  value=\"$r->collegename\">$r->collegename  </option>";

        }

?>
</select>
<?php }else{ ?>
<select name="mycollegename">
  <option value="">Select State</option>
</select>
<?php } ?>

根据先前的选择选项显示/隐藏选择值

3 个答案: