He desplegado seleccionar y mostrar ocultar otros campos (dentro de divs) según la opción seleccionada en la lista desplegable.

Este código funciona bien y se muestra oculto según la selección, pero cuando cargo la página, todos los campos están visibles.

Otra cosa es, por ejemplo, si quiero mostrar los campos si se seleccionó la opción 2 y guardar la opción en la base de datos, y cuando vuelva a cargar la página no está guardando el estado de ocultación de la presentación en función de la opción seleccionada.

HTML

<select id="row1_layout_options" name="row1_layout_options">
    <option value="Select Layout Type">Select Layout Type</option>
    <option value="layout_type1">layout_type1</option>
    <option value="layout_type2">layout_type2</option>
    <option value="layout_type3">layout_type3</option>
    <option value="layout_type4">layout_type4</option>
    <option value="layout_type5">layout_type5</option>
    <option value="layout_type6">layout_type6</option>
    <option value="layout_type7">layout_type7</option>
    <option value="layout_type8">layout_type8</option>
</select>

<div id="row1_col1_layout_type2">
    <input type="text" class="qa-form-tall-text" value="" name="q2am_fp_row1_col1_layout_type2">
</div>

Jquery

$('#row1_layout_options').change(function() {
   $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
   $('#row1_col1_' + $(this).val()).show();
});

Entonces, ¿cómo puedo escribir un script donde todos los campos están ocultos en la carga de la página pero mantendrá el estado de ocultación de mostrar en función de la opción seleccionada?