3

I'm trying to populate a select menu based on the value selected on another select menu.

So far, I managed to get the value and my PHP code does return the values as JSON. However, I can't seem to figure out how to show the data in the next select menu. 

<div class="form-group">
    <label for="laptopBrand">Laptop Brand</label>
    <select class="form-control" id="laptopBrand">
        <?php foreach($laptop_brands as $laptop_brand): ?>
            <option value="<?= $laptop_brand['Lbrand'] ?>"><?= $laptop_brand['Lbrand'] ?></option>
        <?php endforeach; ?>
    </select>
</div>

<div class="form-group">
    <label for="laptopSeries">Laptop Series</label>
    <select class="form-control" id="laptopSeries">
    </select>
</div>

JQuery

$("#laptopBrand").change(function(){
    var lbrand = $(this).val();
    $.ajax({
        type: "POST",
        data: 'laptopSeries='+lbrand,
        url: 'includes/fetch.php',
        dataType: 'json',
        success: function(json) {
            var a = JSON.parse(json);
            alert(a);
            var $el = $("#laptopSeries");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(json, function(value, key) {
                $el.append($("<option></option>")
                        .attr("value", value).text(key));
            });
        }
    });
});

PHP

if($_POST){
        $laptopSeries = $_POST['laptopSeries'];
        try{      
           $stmt = $db_con->prepare("SELECT `Lseries` FROM `laptop` WHERE `Lbrand` = '$laptopSeries'");
           $stmt->execute();
           $series = $stmt->fetchAll(PDO::FETCH_ASSOC);

           foreach ($series as $series) {
                $array = array($series['Lseries'] => $series['Lseries']);
                echo json_encode($array);
            }

        }catch(PDOException $e){
            echo $e->getMessage();
        }
    }
nTuply
  • 1,364
  • 19
  • 42
  • If you are using `->prepare()`/`->execute()` then you should really be using placeholders to prevent sql injection https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php – Sean Aug 25 '17 at 13:56
  • @Sean Thanks for pointing out. I know I should be using binParam(). But for now that's not my main concern as I'm trying to figure the dropdown out. – nTuply Aug 25 '17 at 13:57
  • where's this coming from first? `$laptop_brands` or is it not relevant? – Funk Forty Niner Aug 25 '17 at 14:02
  • @Fred-ii- I am polutlating the first dropdown menu, but it's not really relevant as the second dropdown is the problem. I did a network inspection and the response is returned fine, it's just not showing up on the second dropdown. It's probably something wrong on the Javascript that shows the json data. – nTuply Aug 25 '17 at 14:04

1 Answers1

0

Do like this and make sure your server code return exactly what you want to fill in key and value.

$.each(a,function(key, value)  // a or jsondata

{

$select.append('<option value=' + key + '>' + value + '</option>');

});

Altaf Khokhar
  • 306
  • 2
  • 8