Session or something in jQuery

Would this all be within the same function, If so add a function variable say var selectedSize;, then with in you .on('change',....method, set this var to that value selectedSize=this.val;

Then you can use this with in the ajax data.

If its not in the same function just place the var selectedSize; outside and set it as a global var, so it can be used/set in any function.

@simondavies This is the full function, see if this helps you to help me :)

$('.colors').on('change', function(e){
                var option = $("#optionID option:selected").val();
                var colour = $("#optionID option:selected").attr("data-selected-colour");
                var select = $(".sizes");

                $.get('/getColourSizes?option_id=' + option + '&colour_id=' + colour, function(data){
                    select.empty();
                    $.session.set("optionId", option);
                    $.session.set("colourId", colour);

                    // Append select a size option
                    select.append('<option selected>Please select a size</option>');

                    var options = $(".sizes");
                    $.each(data, function(index, value) {
                        options += '<option value="' + value.size + '" name="selectedSize" data-selected-size="' +value.size+ '">' + value.size + '</option>';
                        sessionStorage.setItem('selectedSize', $(".sizes option:selected").attr("data-selected-size"));
                    });
                    $('.sizes').append(options);
                });
            });

So your ajax will be used/called outside this function? and used within the SIZES on change function??

I see your trying the following:

sessionStorage.setItem('selectedSize', $(".sizes option:selected").attr("data-selected-size"));

But as there is no selected size yet this will not set you will need to add another on change to the sizes select to get this.

So you can then attach an on chamge to the sizes within like so ( i have not include all your code just enough to see my additions

      var options = $(".sizes");
        $.each(data, function(index, value) {
            options += '<option value="' + value.size + '" name="selectedSize" data-selected-size="' +value.size+ '">' + value.size + '</option>';
            sessionStorage.setItem('selectedSize', $(".sizes option:selected").attr("data-selected-size"));
        });
        $('.sizes').append(options);
        // now set the on change event to the sizes select
        $('.sizes').on('change', function(e){
            var selectedSize = $(this).find("option:selected").text();

            //-- YOU CAN PERFORM YOU AJAX HERE

            
        });
    

So with the full script looking like so @simondavies

 $(function(){
        $('.colors').on('change', function(e){
            var option = $("#optionID option:selected").val();
            var colour = $("#optionID option:selected").attr("data-selected-colour");
            var select = $(".sizes");
            var selectedSize;

            $.get('/getColourSizes?option_id=' + option + '&colour_id=' + colour, function(data){
                select.empty();
                $.session.set("optionId", option);
                $.session.set("colourId", colour);

                // Append select a size option
                select.append('<option selected>Please select a size</option>');

                var options = $(".sizes");
                $.each(data, function(index, value) {
                    options += '<option value="' + value.size + '" name="selectedSize" data-selected-size="' +value.size+ '">' + value.size + '</option>';
                    sessionStorage.setItem('selectedSize', $(".sizes option:selected").attr("data-selected-size"));
                });
                $('.sizes').append(options);

                // Ajax call
                $("#addToCart").click(function(e) {
                    var selectedSize = $(this).find("option:selected").text();
                    var option = $("#optionID option:selected").val();
                    var colour = $("#optionID option:selected").attr("data-selected-colour");

                    console.log(selectedSize);
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: "/add_to_cart",
                        data: {
                            option_id: $.session.get("optionId"),
                            selectedColour: $("#optionID option:selected").attr("data-selected-colour"),
                            selectedSize: selectedSize=this.val
                        },
                        success: function(data){

                        }
                    });
                });
            });
        });
    });

In the console I'm getting the following:

array:2 [
  "option_id" => "609"
  "selectedColour" => "Yellow"
]

So it's not passing the var selectedSize to the ajax

Actually you have used the $(this), as its not set in a on change event, you need to target it like

selectedSize = $(".sizes option:selected").val();

Also you dont need these as they are set earlier on:

                var option = $("#optionID option:selected").val();
                var colour = $("#optionID option:selected").attr("data-selected-colour");

so try

    $("#addToCart").click(function(e) {
                selectedSize = $(".sizes option:selected").val();
                console.log(selectedSize);
                e.preventDefault();
                $.ajax({

Ok got ya thanks @simondavies but still not quite right:

I have

selectedSize = $(".sizes option:selected").val();
                // Ajax call
                $("#addToCart").click(function(e) {
                    var option = $("#optionID option:selected").val();
                    var colour = $("#optionID option:selected").attr("data-selected-colour");

                    console.log(selectedSize);
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: "/add_to_cart",
                        data: {
                            option_id: $.session.get("optionId"),
                            selectedColour: $("#optionID option:selected").attr("data-selected-colour"),
                            selected_size: selectedSize // This showing as "selected_size" => "Please select a size" rather than what I selected.
                        },
.....

Had to move selectedSize = $(".sizes option:selected").val(); within the click event then set to var selectedSize = $(".sizes option:selected").val(); which now seems to work, many thanks for your time and help @simondavies greatly appreciated.

first of all are you getting a value for the selected size, just to narrow down what the issue is as you have not said in the last post, sorry.

If you are gettign the value then is it not populating down to the selected_size: selectedSize??

try putting the selectedSize = $(".sizes option:selected").val();inside the click event not outside?