连接 Function 用于将一个表中的字段值与另一表匹配

Question

I am trying to display field values, when values of field in the table matches with the values in field of another table.

Its like I am creating a drop down fields. Here basis the car Model dropdown. Like Ferrari as Model chosen in dropdown by user as prod_name under table newcar_products then its variants like Portnifo, superfast,488 should be shown under Variant field.

But whats happening as of now - irrespective of model selected whether Ferrari or Honda or Volkswagen - the variants displays the entire list of variants like polo, jazz,portnifo,accord,passat as stored in v_name in table newcar_variants. I want that variants v_name should be displayed only for v_prod_id in table A matches with id in table B

Like, i have created these 2 functions where first function of drop down are working perfectly

      <?php    
        function model_drop_down(){
            $database = JFactory::getDBO();
            $sql = "SELECT * from #__newcar_products where state='1'  order by prod_name Asc";
            $database->setQuery($sql);
            $rows = $database->loadObjectList();
            $list="";
            foreach($rows as $row){
                $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->prod_name."</option>";
            }
            return $list;
        }


       function variant_drop_down(){
    $database = JFactory::getDBO();
    $sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    and a.state='1' where  1 order by a.v_prod_id asc";
    $database->setQuery($sql);
    $rows = $database->loadObjectList();
    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    return $list;
    } ?>

     <div class="common-box">
        <div class="common-box-left">Car Model*</div>
        <div class="common-box-right">
          <div id="txtHint">
          <select name="model"  class="list-box-big"  id="model"  lang="MUST" title="Model" style="width:245px; height:25px;">
              <option value="" selected="selected" style="padding-left:10px;"> Select Model</option>
<?php echo model_drop_down();?>
            </select>
          </div>
        </div>
      </div>
      <!--box end-->
      <!--box start-->
      <div class="common-box">
        <div class="common-box-left">Sub Model*</div>
        <div class="common-box-right">
          <div id="txtHintVariant">
          <select name="variant" class="list-box" id="brand"  lang="MUST" title="Brand">
                <option value="" selected="selected" style='padding-left:10px;'>Select Variant</option>
                <?php echo variant_drop_down();?>
            </select>
          </div>

Heres schema of both tables

As of now the fields displaying all models and name of all variants. Whats happening now in second field of variant its displaying all value stored in v_name rather than only those under v_name where v_prod_id in newcar_variants matches with id in newcar_products

I think a way needed which Step 1 When a user select Model from drop down in the first field, the varle of field id needs to be stored in newcar_products

Step 2 Then in second field of select variant, when the user select drop down of model in the first field. the value of 'id' as stored in newcar_products should match with the v_prod_id in the second table newcar_variants and thus the list of variants to be displayed in matching 'v_name'

How to create the function to achieve desired. Can anyone help, been novice this would be a great learning. thanks

Answer 1

I took your code and added the missing features, after stubbing the DB connection.

You can try it live using the link below:

https://code.sololearn.com/wm6EGyHmt5cj

Just click the green "RUN" button and you will be able to select a model in the dropdown and to see the variants being filtered accordingly.

And here is the full code as well (in case this link expires):

<?

function getModel($id, $name) {
    $row = new stdClass();
    $row->id = $id;
    $row->prod_name = $name;
    return $row;
}

function getVariant($id, $name, $modelId) {
    $row = new stdClass();
    $row->id = $id;
    $row->v_name = $name;
    $row->v_prod_id = $modelId;
    return $row;
}

function model_drop_down(){
    //---YOUR CODE COMMENTED BELOW---
    // $database = JFactory::getDBO();
    // $sql = "SELECT * from #__newcar_products where state='1'  order by prod_name Asc";
    // $database->setQuery($sql);
    // $rows = $database->loadObjectList();
    //---END OF YOUR COMMENTED CODE---

    //---MY DB STUB BELOW
    $rows = [];
    array_push($rows, getModel(0, 'Ferrari'));
    array_push($rows, getModel(1, 'Honda'));
    array_push($rows, getModel(2, 'Volkswagen'));
    //---END OF MY DB STUB

    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->prod_name."</option>";
    }
    return $list;
}


function variant_drop_down(){
    //---YOUR CODE COMMENTED BELOW---
    // $database = JFactory::getDBO();
    // $sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    // and a.state='1' where  1 order by a.v_prod_id asc";
    // $database->setQuery($sql);
    // $rows = $database->loadObjectList();
    //---END OF YOUR COMMENTED CODE---

    //---MY DB STUB BELOW
    $rows = [];
    array_push($rows, getVariant(0, '250 GTO', 0));
    array_push($rows, getVariant(1, 'F430', 0));
    array_push($rows, getVariant(2, 'F40', 0));
    array_push($rows, getVariant(3, 'Civic', 1));
    array_push($rows, getVariant(4, 'CR-V', 1));
    array_push($rows, getVariant(5, 'Golf', 2));
    array_push($rows, getVariant(6, 'Polo', 2));
    array_push($rows, getVariant(7, 'Passat', 2));
    //---END OF MY DB STUB

    $list="";
    foreach($rows as $row){
        $list.="<option value='".$row->id."' data-v_prod_id='".$row->v_prod_id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    return $list;
}

?>

<div class="common-box">
    <div class="common-box-left">Car Model*</div>
    <div class="common-box-right">
        <div id="txtHint">
            <select name="model" class="list-box-big" id="model" lang="MUST" title="Model" style="width:245px; height:25px;">
                <option value="" selected="selected" style="padding-left:10px;"> Select Model</option>
                <?php echo model_drop_down();?>
            </select>
        </div>
    </div>
</div>
<!--box end-->
<!--box start-->
<div class="common-box">
    <div class="common-box-left">Sub Model*</div>
    <div class="common-box-right">
        <div id="txtHintVariant">
            <select name="variant" class="list-box" id="brand" lang="MUST" title="Brand">
                <option value="" selected="selected" style='padding-left:10px;'>Select Variant</option>
                <?php echo variant_drop_down();?>
            </select>
        </div>
    </div>
</div>

<script>
//wait for html DOM loaded
document.addEventListener("DOMContentLoaded", function(event) {
    //listen to "model dropdown changed by user" event
    document.getElementById("model").onchange = function filterVariants(){

        //get the currently selected model
        const selectedModelId = document.getElementById('model').value;

        if(selectedModelId=="") {
        //if no model is selected, show all the variants (set display=block for all options)

            for(option of document.querySelectorAll('#brand>option')) {
                option.style.display='block';
            }

        } else {
        //if a model is selected, show the only variants having 'data-v_prod_id' attribute equal to the id of the selected model, plus the defaul "Select Variant" option

            for(option of document.querySelectorAll('#brand>option')) {
                if(option.getAttribute('data-v_prod_id')==selectedModelId) {
                    //variant from the selected model => show the option
                    option.style.display='block';
                } else if(option.value=="") {
                    //default option (the one with "Select Variant") => show it
                    option.style.display='block';
                    option.selected=true;
                } else {
                    //else, it's a variant from another model => hide it
                    option.style.display='none';
                }
            }
        }

        //reset the variant dropdown to default "Select Variant" value
        document.querySelector('#brand>option[value=""]').selected=true

    };
});
</script>

Here is the description of my changes:

1. Mockup Data

Of course, I don't have access to your DB, so I replaced the SQL connection and query with a few lines of code to create mockup data:

function getModel generates a model object that looks like a SQL model result row

function getVariant generates a variant object that looks like a SQL variant result row

Then in your model_drop_down function, I manually created data to populate $rows in order to have $rows look the same than the result of your SQL query:

array_push($rows, getModel(0, 'Ferrari'));
array_push($rows, getModel(1, 'Honda'));
array_push($rows, getModel(2, 'Volkswagen'));

For instance, the last line means I'm creating a mockup model with id=2 and name='Volkswagen'

Then I did the same with variants in your variant_drop_down function:

array_push($rows, getVariant(0, '250 GTO', 0));
array_push($rows, getVariant(1, 'F430', 0));
array_push($rows, getVariant(2, 'F40', 0));
array_push($rows, getVariant(3, 'Civic', 1));
array_push($rows, getVariant(4, 'CR-V', 1));
array_push($rows, getVariant(5, 'Golf', 2));
array_push($rows, getVariant(6, 'Polo', 2));
array_push($rows, getVariant(7, 'Passat', 2));

For instance, the last line means I'm creating a mockup variant with id=7, name='Passat' and v_prod_id=2 (which is Volkswagen).

Ok, now I have stubbed your database, we can start coding!

---

2. Change the SQL variants query to get them all and select the 'v_prod_id' field

The variant_drop_down function will be called only once (php is a server side language, it runs once to render the html code of the page, and is never run again), so we need to get all the data at once, and retrieve the v_prod_id field in order to memorize which variant belongs to which model (we'll use this information in the next steps)

So we'll change 2 things in the query:

1. Remove the JOIN ON a.v_prod_id = b.id
2. Add a.v_prod_id in the SELECT clause

So from this:

SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id and a.state='1' where  1 order by a.v_prod_id asc

You will end up with something like this:

SELECT a.id, a.v_name, a.v_prod_id FROM #__newcar_variants a where a.state='1' order by a.v_prod_id asc

---

3. Add the v_prod_id on each item of the variant dropdown

This is done by adding data-v_prod_id='".$row->v_prod_id."' in your code.

Here is what the html code of the variant dropdown looks like, now:

<select name="variant" class="list-box" id="brand" lang="MUST" title="Brand">
    <option value="" selected="selected">Select Variant</option>
    <option value="0" data-v_prod_id="0">250 GTO</option>
    <option value="1" data-v_prod_id="0">F430</option>
    <option value="2" data-v_prod_id="0">F40</option>
    <option value="3" data-v_prod_id="1">Civic</option>
    <option value="4" data-v_prod_id="1">CR-V</option>
    <option value="5" data-v_prod_id="2">Golf</option>
    <option value="6" data-v_prod_id="2">Polo</option>
    <option value="7" data-v_prod_id="2">Passat</option>
</select>

As you can see, we have data-v_prod_id on each variant.

Now, for each option in the variant dropdown, we know which model it's related to.

So, using javascript, each time the user will change the model, we can filter the displayed variants having v_prod_id equal to the selected model.

---

4. Dynamic variant filtering using javascript

Each time the user will change the model, we will filter the variant dropdown accordingly.

This is the script to do it, I have put comments on each line to explain the details:

<script>
//wait for html DOM loaded
document.addEventListener("DOMContentLoaded", function(event) {
    //listen to "model dropdown changed by user" event
    document.getElementById("model").onchange = function filterVariants(){

        //get the currently selected model
        const selectedModelId = document.getElementById('model').value;

        if(selectedModelId=="") {
        //if no model is selected, show all the variants (set display=block for all options)

            for(option of document.querySelectorAll('#brand>option')) {
                option.style.display='block';
            }

        } else {
        //if a model is selected, show the only variants having 'data-v_prod_id' attribute equal to the id of the selected model, plus the defaul "Select Variant" option

            for(option of document.querySelectorAll('#brand>option')) {
                if(option.getAttribute('data-v_prod_id')==selectedModelId) {
                    //variant from the selected model => show the option
                    option.style.display='block';
                } else if(option.value=="") {
                    //default option (the one with "Select Variant") => show it
                    option.style.display='block';
                    option.selected=true;
                } else {
                    //else, it's a variant from another model => hide it
                    option.style.display='none';
                }
            }
        }

        //reset the variant dropdown to default "Select Variant" value
        document.querySelector('#brand>option[value=""]').selected=true

    };
});
</script>

---

I hope my answer satisfies you.

Again, you can try it live by clicking this link: https://code.sololearn.com/wm6EGyHmt5cj then clicking the green "RUN" button.

Answer 2

<optgroup> May this HTML tag can help you? https://developer.mozilla.org/fr/docs/Web/HTML/Element/Optgroup

Then you have only one DB query:

function variant_drop_down(){
    $database = JFactory::getDBO();
    $sql = "SELECT b.prod_name, a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products b ON a.v_prod_id = b.id
    and a.state='1' where  1 order by a.v_prod_id asc";
    $database->setQuery($sql);
    $rows = $database->loadObjectList();
    $list="";
    $label=null;
    foreach($rows as $row){
        if ($label!=$row->prod_name) {
            if (null!==$label) {
                $list.="</optgroup>";
            }
            $label=$row->prod_name;
            $list.='<optgroup label="'.$label.'">';
        }
        $list.="<option value='".$row->id."' style='padding-left:10px;'>".$row->v_name."</option>";
    }
    if (null!==$label) {
        $list.="</optgroup>";
    }
    return $list;
    } ?>

Answer 3

As whatever you are trying to achieve that would not be done through PHP alone. You have to use JQuery/JavaScript to achieve the result.

If your Models and Variants are static then use the code of Vincent but to do dynamic you have to use below code.

I am just giving the idea you have to workout the exact solution of ajax based solution.

This would be first drop out option as:

 <select name="model" id="model">
       <?php echo model_drop_down();?>
 </select>

 <select name="variant" id="variant">
 </select>

Your Jquery code would be like this:

$(document).ready(function() {
    $('#model').change(function() {
        $.ajax({
            type : 'POST',
            url : 'variant.php',
            dataType : 'json',
            data: {
                model : $('#model').val()
            },
            success: function(data){
                $('#variant >option').remove();
                var s= document.getElementById('model');
                s.options[s.options.length]= new Option('Kindly Select Variant', '');
                $.each(data.variant, function() {
                    s.options[s.options.length]= new Option(this, this);
                })
            }
        });
    });
})

Your variant.php file

//I don't know the exact variant value but the post value is the mode id number here
// $_POST["model"] = $row->id

$database = JFactory::getDBO();

//Create the query to exact the only variants of model number here

$sql = "SELECT a.id, a.v_name FROM #__newcar_variants a JOIN #__newcar_products 
    b ON a.v_prod_id = b.id and a.state=$_POST["model"] where  1 order by a.v_prod_id asc";

$database->setQuery($sql);
$rows = $database->loadObjectList();
foreach($rows as $row){
    $t[]= $row->v_name;
}
$return['variant']=$t;
echo json_encode($return);

It is not the exact solution but a basic idea more you have to do changes according to your needs. This example may contain some minor error as it is not run

Answer 4

I am preferring ajax based solution for this if user selects var model based on that car variant is loaded.Link

Also you can go for php array based solution let me know i can you show you that also but I prefer ajax based solution for this.