CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Dennis
Dennis

Reputation: 3690

Three dropdown menus responding to eachother

I have 3 dropdown lists like this: problem definition 1

The code I have for this is as follows:

<td class="tditemlabel">Category*</td>
<td>
    <select id='catselect' class='catselect' name='catselect' onclick="document.getElementById('subcatselect').disabled=false">
       <option value="0">--Select a category--</option>
            <?php getAllCategories(); ?>
    </select>
</td>
    <td class="formhelp">Choose item category</td>
</tr>
<tr>
    <td class="tditemlabel">Subcategory*</td>
    <td>
        <select id='subcatselect' class='catselect' name='subcatselect' disabled onclick="document.getElementById('subsubcatselect').disabled=false">
            <option value="0">--Select a subcategory--</option>

        </select>
    </td>
</tr>
<tr>
    <td class="tditemlabel">Sub-subcategory*</td>
    <td>
        <select id='subsubcatselect' class='catselect' name='subsubcatselect' disabled>
                <option value="0">--Select a sub-subcategory--</option>

        </select>
    </td>
</tr>

The data in the dropdown boxes is correctly fetched from my MySQL database. So, based on what is selected in the category dropdown list, the second one enables and the data is correctly inserted there. No problems so far.

At this point I encounter a couple of problems: The first one is when for example (as soon in the picture below) is when I select the 'electronics' category, the subcategory list enables and shows me the 3 possible values it has ('computers&tablets','smartphones','photography'), now as can be seen, the first option is automatically selected and thus the 3rd dropdown list is not automatically enabled and filled with content. And clicking on this first one does not work either, i have to click on another one and then click again on the first one to see its contents in the 3rd dropdown. Problem statement 2

A solution could be to add a 'dummy-option' everywhere, however this seems like a somewhat bad use case in my example. Since I have 9 categories, which all have 2 to 3 subcategories, and these subcategories all have 3 to 4 subcategories on their turn. If i have to add 'select a subsubcat' in every dropdown list (with e.g. 2 items) this seems a lot of useless information. (Could anyone provide me a solution to this? if not could anyone also explain me how to get this dummy text everywhere since I only know how to do that if it is in the database as well.)

And so we come to my second problem is let's say a user clicked on a category, a subcategory and a sub-subcategory, but now he wants to change the category again, this is what happens: Problem statement 3

How can I disable again the sub-subcategory dropdown lists when the user changes category (and instantly enable the correct subcategory list)

The JQuery code I have so far is this:

$("#catselect").on("change", function() {
    var categoryid = document.getElementById("catselect").value;
    $.post('category_list.php', { catid: categoryid }, function(result) {
            $('#subcatselect').html(result);
       }
   );
});

$("#subcatselect").on("change", function() {
    var subcategoryid = document.getElementById("subcatselect").value;
    $.post('subcategory_list.php', { subcatid: subcategoryid }, function(result) {
            $('#subsubcatselect').html(result);
       }
    );
});

and the PHP code: 'category_list.php' (the 'subcategory_list.php' file is pretty much the exact same)

<?php
require 'includes/functions.php';

$cat_id = $_REQUEST['catid'];
if ($cat_id != 0)
{
    $result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
}

while($row = mysqli_fetch_array($result)) {
    echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
}
?>

Upvotes: 1

Views: 326

Answers (1)

Ruby Racer
Ruby Racer

Reputation: 5740

VERY EDITED (context remains):

First thing first, you PHP is SQLinjection-ready... You send the input from your select (catid) directly to the db... Change it... Make sure it's numeric before you create your query.

Also, if your query never gets executed, you will probably get an exception when trying to fetch rows... So put it all under if:

$cat_id = $_REQUEST['catid'];
if ( is_numeric($cat_id) && $cat_id != 0 ) {
    $result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
    while($row = mysqli_fetch_array($result)) {
        echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
    }
}

Now, let's take it to your question. This is the full javascript you should need.

var subcat = '<option value="0">--Select a category--</option>';
var subsubcat = '<option value="0">--Select a sub-subcategory--</option>';
// ^^ these should be placed in the new controls

$("#catselect").on("change", function() {
    $.post('category_list.php', 
        { catid: categoryid }, 
        function(result) {
            $('#subcatselect').html(subcat+result);
            $('#subcatselect').change();
        }
    );
});

$("#subcatselect").on("change", function() {
    $.post('subcategory_list.php', 
        { catid: subcategoryid }, 
        function(result) {
            $('#subsubcatselect').html(subsubcat+result);
            $('#subsubcatselect').change(); // I guess you don't need this
        }
    );
});

Upvotes: 1

Related Questions