jQuery muestra / oculta las opciones de un menú desplegable de selección, cuando se selecciona la opción del otro menú desplegable de selección
Necesito mostrar / ocultar opciones en un menú desplegable de selección dependiendo de otras opciones desplegables de selección.
El siguiente código muestra lo que estoy tratando de lograr.
Si la opción del menú de selección 'column_select' está configurada en '1 columna', entonces el menú de selección 'layout_select' debe mostrar solo la opción 'none'.
Si la opción de menú de selección 'column_select' está configurada en '2 columnas', entonces el menú de selección 'layout_select' debe mostrar solo las opciones de 'diseño 1' y 'diseño 2'.
Si la opción de menú de selección 'column_select' está configurada en '3 columnas', entonces el menú de selección 'layout_select' debe mostrar solo las opciones de 'diseño 3', 'diseño 4' y 'diseño 5'.
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
Hasta ahora, todo lo que he intentado ha fallado abismalmente ... Soy nuevo en jQuery. Si alguien pudiera ayudar, sería muy apreciado. ¡Gracias