Ajax code is not appending to html select statment

Question

I have two selects, one to select the group and the other to show sub-group categories.

<div class="frmDronpDown">
    <div class="row">
        <label>group:</label><br/>
        <select name="country" id="country-list"  onChange="getState(this.value);">

        <?php while($x--)
        {
            echo "<option value='.$group_id[$x].'>$group_name[$x]</option>";} ?>
        </select> 
    </div>
    <div class="row">
        <label>Services:</label><br/>
        <select name="state" id="state-list" class="demoInputBox">
        </select>
    </div>
</div>

and the jQuery function:

function getState(val) {
    $.ajax({
        type: "POSt",
        url: "http://abcd/Get_Service.php",
        data:'gp_id='+val,
        success: function(data){
            $("#state-list").html(data);
        }
    });
}

The PHP outputs:

<option value='5'>V Cut</option><option value='11'>Hair Wash Girls</option>
<option value='12'>Lakme Hair Cut</option>

I have tried many things but I'm still not getting the correct output.

Answer 1

you cannot set html property on a select box instead of that give an id to your services div say

<div class="row" id="services">
    <label>Services:</label><br/>
    <select name="state" id="state-list" class="demoInputBox">
    </select>
</div>

and then in your php page put following html code around your output code in php file

<label>Services:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
// Your php page output
</select>

and then finally in your ajax code do following changes.

function getState(val) {
$.ajax({
    type: "POSt",
    url: "http://abcd/Get_Service.php",
    data:'gp_id='+val,
    success: function(data){
        $("#services").html(data);
    }
});
}

Answer 2

Rohan said in his comment :
" Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at Get_Service.php. (Reason: CORS header 'Access-Control-Allow-Origin' missing) ."

That because you try to make an Ajax Request different than the original domain: Host and/or Port are different

Try with this JavaScript function :

function getState(val) {
    $.ajax({
        type       : "POSt",
        url        : "http://abcd/Get_Service.php",
        data       : "gp_id=" + val,
        dataType   : "jsonp",
        crossDomain: true,        
        success    : function(data){
            $("#state-list").html(data);
        }
    });
}

Answer 3

function getState(val) {
    $.ajax({
        type: "POSt",
        url: "http://abcd/Get_Service.php",
        data:'gp_id='+val,
        success: function(data){
        document.getElementById("state-list").innerHTML=data;
        }
    });
}

try to override innerHTML of id state-list