Question

code to call function:

<select id="selectWarrior_1" name="warrior_1"  onclick="return selectWarriors()">
                    <option  selected="selected">----Select----</option>
                </select>

code of the function:

function selectWarriors() {
        $.ajax({
            url: "display_warriors.php",
            datatype:"json",
            success: function(data) {
                var toAppend = '';
                if(typeof data === "object"){
                    for(var i=0;i<data.length;i++){
                        var warrior = data[i];
                        toAppend += '<option>'+data[i]['warrior_name']+'</option>';
                    }
                    $("#selectWarrior_1 select").append(toAppend);
                }
            }
        });
        return false;
    }

Code of my php:

    <?php
header("Content-Type: application/json");

include 'functions/class.php';

$db = new DB();

$result = $db->getWarriors();

$warriors = array();

foreach($result as $names){
    $warriors[] = $names;
}
echo json_encode($warriors);
?>

How can I fix this? Why its not populating my select-option i checked my json and it has values.

Answer 1

Your selector is incorrect

Change $("#selectWarrior_1 select")

To $("#selectWarrior_1")