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

Question

I have 2 select's inside a form. The second select has about 2000 lines in total coming out of my mysql table. One of the column into that mysql has 1 of the values used into the first select. I want to be able to filter on that value when it is selected into the first select, so that it only shows these articles.

code now:

<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>

I think i have to use Javascript for it but how do you combine PHP and Javascript? And what would be the best way to make the filter work?

Answer 1

jQuery for the change event and 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
            }
        });
    });
});

In your 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;
?>

Note: You can also use JSON instead of HTML for much simplicity. Read here, how to.