Skip to content Skip to sidebar Skip to footer

Send Select Dropdown To Another Select Dropdown

I'm making a website to learn coding and am making 2 select dropdowns that will have 1 be populated from the database table -> cat. The other select dropdown will be populated f

Solution 1:

You need to make an ajax call to query the database in the background, then return the results (as HTML) and populate your subcategory select.

<select name="cat" id="cat">...</select>
<select name="subCat" id="subCat">...</select>

<script language="javascript">
    $('#cat').change(function() {
        $.post('getSubcat.php', {
           cat: $(this).val()
        }, function(data) {
            $("#subCat").html(data);
        }
    });
</script>

Make sure your getSubcat.php script echoes the results as

<option value='whatever'>Label</option>
<option value='whatever2'>Label2</option> ...

getSubcat.php would be a simple query / output script:

<?php
$category = $_POST['cat'];

$query = "SELECT * FROM subcategories WHERE parent_category = " . $category;
$result = mysql_query($query);

echo "<option value='0'>Select a subcategory</option>";
while($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['id'] . "'>" . $row['subcategory_name'] . "</option>";
}

NOTE: This utilizes jQuery - make sure your page includes the jQuery libraries

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Post a Comment for "Send Select Dropdown To Another Select Dropdown"