jQuery show/hide options from one select drop down, when option on other select dropdown is slected

Try –

$("#column_select").change(function () {
    $("#layout_select").children('option').hide();
    $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})  

If you were going to use this solution you’d need to hide all of the elements apart from the one with the ‘none’ value in your document.ready function –

$(document).ready(function() {
    $("#layout_select").children('option:gt(0)').hide();
    $("#column_select").change(function() {
        $("#layout_select").children('option').hide();
        $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
    })
})

Demo – http://jsfiddle.net/Mxkfr/2

EDIT

I might have got a bit carried away with this, but here’s a further example that uses a cache of the original select list options to ensure that the ‘layout_select’ list is completely reset/cleared (including the ‘none’ option) after the ‘column_select’ list is changed –

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value="" + this.value + "">" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

Demo – http://jsfiddle.net/N7Xpb/1/