Populate select box when clicking link

I have a tshirt page where the user needs to pick a color and a size (see [example here][1])

I need to populate the "sizes" dropdown when the user click a color (an image with a link).

The code of the color image/link that will be used to populate the looks like this:

<a  onclick="document.getElementById('productColor10474717').value='120';" class="colorlink" href="https://www.example.com/tshirt_image.php?a=10474717&color=120" target="tshirt_image">

(in this link, the color code would be 120)

I already made a php script to get the results that must be populated in the dropdown: https://example.com/_test/tshirt_ajax.php?checkshop=266497&checkproducttype=210&stockcolor=2

"&stockcolor" is the variable for the color code. The other 2 variables must stay untouched

The php page will return something like that:

[{"optionValue":2, "optionDisplay": "2"},{"optionValue":3, "optionDisplay": "3"},{"optionValue":4, "optionDisplay": "4"},{"optionValue":5, "optionDisplay": "5"},{"optionValue":6, "optionDisplay": "6"}]

I'm really newbie with AJAX and i have no idea how to implement the AJAX on the tshirt page to get the results from the php page using the color code variable and then populate it into the dropdown box, and i would need help to do it

Thanks a lot!

make the php file print results like

<option value="optionValue">optionResult</option>
<option>.......</option>
<option>.......</option>

add id="stockcolor" to each (a) element and remove the hyperlinks and onclick javascript like:

<a id="63" class="colorlink" href="#">
    <img src="https://image.spreadshirt.com/image-server/v1/appearances/63" width="24" height="24" class="cnormal">
</a>

install jquery (add this line to the head of your document):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

then use ajax

$(document).ready(function(){
    $.ajax({
        type: "post",
        url: "Untitled-3.php?checkshop=266497&checkproducttype=210&stockcolor=" + $('#productColor10474717').val(),
        success: function(data){
            $('select#size').html(data);
    }
    });


    $('a.colorlink').click(function(){
    var stockcolor = $(this).attr('id'),
        checkshop = 266497,
        checkproducttype = 210;

    $.ajax({
        type: "post",
        url: "tshirt_ajax.php?checkshop=" + checkshop + "&checkproducttype=" + checkproducttype + "&stockcolor=" + stockcolor,
        beforeSend: function(){
            $('#productColor10474717').val(stockcolor);
        },
        success: function(data){
            $('select#size').html(data);
            $('#tshirt_image').attr('src', 'https://www.ni-dieu-ni-maitre.com/tshirt_image.php?a=10474717&color=' + stockcolor)
        }
    });

    });
});