I really need help on this one. I've been looking at it for hours and been getting nowehere. I am working with ajax in WordPress and this is kind of my first time doing so.

It's always return null data

This is Jquery Code:

<script>
  (function($){

    $(document).ready(function(){
      
      $(document).on('change', '#myform', function(e) {

        e.preventDefault();

        var data = $(this).serialize();

        $.ajax({
          url: "<?php echo admin_url('admin-ajax.php'); ?>",
          data: {action:'myaction', data:data},
          type: 'post',
          success: function(result) {
            $('.products').html(result);
          },
          error: function(result) {
            console.warn(result)
          },
        });

      });
    });
  })(jQuery);
</script>

And this is my PHP Code to get my data:

add_action( 'wp_ajax_nopriv_myaction', 'myaction' );
add_action( 'wp_ajax_myaction', 'myaction' );

    function myaction() {
          $colors= $_POST['color']; 
        
          var_dump($colors);
    }

HTML CODE:

<form id="myform">
     <select name="color">
          <option type="checkbox" id="widget-color" value="1">blue</option>
          <option type="checkbox" id="widget-color" value="2">red</option>
    </select>
</form>

when I do var dump I just see null data so how can fix the problem, please?