John Davidson

Message:

I'm trying to populate a Select Box based in the choice of the first Select Box, but I'm having some troubles doing it. Simply nothing happens.

What I have until now (this is on my footer):

<script src="./plugins/bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("select.category").change(function(){

    var selectedCategory = $(".category option:selected").val();

    $.ajax({

        type: "POST",

        url: "../inc/get_subcat.php",

        data: { category : selectedCategory } 

    }).done(function(data){

        $("#subcategory").html(data);

    });

});

});

</script>

The page with the div is located at /pages/file.php:

     <div class="col-md-6">

     <div class="form-group">

     <label class="control-label">SubCategory</label>

     <div id="subcategory"> </div>

 </div>                                      </div>

The file that does the query is in another folder (inc/get_subcat.php):

<?php

include("config.php");



if(isset($_POST['category'])){

$cat = validar($_POST['category']);



$query = "SELECT id, subcategory FROM subcategories WHERE catid = ?";

#Prepare stmt or reports errors

($stmt = $mysqli->prepare($query)) or trigger_error($mysqli->error, E_USER_ERROR);

#Execute stmt or reports errors

$stmt->bind_param("i", $cat);

$stmt->execute() or trigger_error($stmt->error, E_USER_ERROR);

#Save data or reports errors

($stmt_result = $stmt->get_result()) or trigger_error($stmt->error, E_USER_ERROR);

#Check if are rows in query

if ($stmt_result->num_rows>0) {

    echo "<select class='form-control' id='subcategory' name='subcategory'>";

    # Save in $row_data[] all columns of query

    while($row_data = $stmt_result->fetch_assoc()) {

    # Action to do

        echo "<option value='$row_data[id]'>$row_data[category]</option>";

    }

    echo "</select>";

}

$stmt->close();

}

?>

There is someone that could help me trying to fix this error? Can't fix despite trying for some hours.

Thanks!

Edit:
This is the HTML code with all Select Box:

                                            <div class="row">

                                            <div class="col-md-6">

                                                <div class="form-group">

                                                    <label class="control-label">Category</label>

                                                    <select class='form-control' id='category' name='category'><option value='1'>Categoria 1</option><option value='2'>Categoria 2</option></select>                                                    </div>                                          



                                        </div>

                                            <div class="col-md-6" id="subcategory">



                                            </div>

                                        </div>

---

My Answer:
It looks like the issue might be with the way you are selecting the category value in your jQuery code. Instead of using `$(".category option:selected").val()`, you should use `$("#category option:selected").val()` since the category select box has an id of "category".

So your jQuery code should be:

javascript
$(document).ready(function(){
$("#category").change(function(){
var selectedCategory = $("#category option:selected").val();
$.ajax({
type: "POST",
url: "../inc/get_subcat.php",
data: { category : selectedCategory }
}).done(function(data){
$("#subcategory").html(data);
});
});
});


Also, make sure that your HTML code has the correct id for the category select box:

html

Category

Categoria 1
Categoria 2

With these changes, your code should work as expected. Let me know if you encounter any other issues.