Is it possible to set/update jCrop aspect ratio on select box change?

Question

Is it possible to set/update jCrop aspect ratio on select box change? I've added a ratio and selection variables and worked fine statically but can't get it to work on select change while the select alerts the right values

    jQuery(function ($) {
        var ratio = 4 / 3
        var selection = '[0,0,4,3]';
        $("#ratio").change(function () {
            var text = $(this).find(':selected').text();
            ratio = text;
            val = $(this).val();
            selection = '[0,0,' + val + ']';
            alert(ratio)
        }).trigger('change');

        // Create variables (in this scope) to hold the API and image size
        var jcrop_api,
            boundx,
            boundy,
        // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();
            console.log('init', [xsize, ysize]);

        $('#target').Jcrop({
            onChange: updatePreview,
            onSelect: updateCoords,
            setSelect: selection,
            aspectRatio: ratio
        }, function () {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
        $('#coords').on('change', 'input', function (e) {
            var x1 = $('#X').val(),
                y1 = $('#Y').val();
            jcrop_api.setSelect([x, y]);
        });

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };
    });

    function updateCoords(c) {
        $('#X').val(Math.round(c.x));
        $('#Y').val(Math.round(c.y));
        $('#W').val(Math.round(c.w));
        $('#H').val(Math.round(c.h));
    };

And here is the select values and text which I'm not stick to:

<select  id="ratio">
    <option value="4,3">1.3</option>
    <option value="6,3">1.6</option>
    <option value="9,3">.8</option>
</select>

Answer 1

You can set the Aspect Ratio by:

 jcrop_api.setOptions({
    aspectRatio: yourAspectRatioValue
 }); 

In your code,

$("#ratio").change(function () {
        var text = $(this).find(':selected').text();
        ratio = text;
        val = $(this).val();
        selection = '[0,0,' + val + ']';
        jcrop_api.setOptions({
        aspectRatio: ratio
        }); 
  }).trigger('change');

But place this code after the code where you are applying jCrop on the image.