jQuery keep show hide state based on select option -
i have drop down select , show hide other fields (within divs) based on option selected in dropdown list.
this code works fine , show hide based on selection when load page fields visible.
other thing instance if want show fields if option 2 selected , save option database , when reload page not saving show hide state based on option selected.
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(); }); so how can write script fields hidden on page load keep show hide state based on selected option.
assign common class div's holds content
show hide based on selection when load page fields visible
<div id="row1_col1_layout_type2" class="content"> ^ ----- target single selector css
.content{ display :none; } and in js trigger change event show div option selected
$('#row1_layout_options').change(function() { $('.content').hide(); $('#row1_col1_' + $(this).val()).show(); // sen d ajax request save value in db $.ajax({ }); }).change(); <--- trigger event next page reload. web stateless . not remember previous state. thing can persist value after page refresh. maybe in cookie, local storage or saving on server , retrieving back.. check fiddle
Comments
Post a Comment