Javascript 表单值在重新加载后消失

当我选择颜色字段时，在子类别字段中选择的值将消失 这是我的查看页面

 <div class="form-group col-md-12">
          <label class="form-group col-md-3" for="exampleInputEmail1">Parent Category</label> 

              <div class="form-group col-md-6">
              <select name="parentname" id="parentname" class="form-control">
                <option value="">select one</option>
                <?php foreach ($parent as $row) { ?>
                  <option value="<?php echo $row->id; ?>"><?php echo $row->category_name; ?></option>
                <?php } ?>
              </select>
            </div>
      </div>
      <div class="form-group col-md-12">
          <label class="form-group col-md-3" for="exampleInputEmail1">Sub Category</label> 

              <div class="form-group col-md-6">
              <select name="subname" id="subname" class="form-control">
                <option value="">select one</option>
                  <?php foreach ($sub_cat as $row){?>
                <option value="<?php echo $row->id;?>"><?php echo $row->category_name;?></option>
            <?php }?> 
              </select>
            </div>
      </div>
 <div class="form-group col-md-12">
          <label class="form-group col-md-3" for="exampleInputEmail1">Color</label> 

              <div class="form-group col-md-6">
              <input readonly id="mycolor" class="colorPicker evo-cp0 form-control" data-toggle="tooltip" data-placement="top" title="Pick Product color" />
            </div>
      </div>

      <div class="form-group col-md-12">
        <label for="exampleInputPassword1">Selected Colors</label>
        <div class="clearfix"></div>

         <div id="selected-color">
           <?php if($this->session->userdata('colors')){
                foreach ($this->session->userdata('colors') as $color)
                {?>
            <div class="col-md-2 selected-color">
                <div class="color-box" style="background-color:<?php echo $color; ?>"></div>
                <div class="selected-color-btn" color='<?php echo $color; ?>' data-toggle="modal" data-target="#confirm-color" >
                <span class="fa fa-close" data-toggle="tooltip" data-placement="top" title="Remove color"  ></span></div>
            </div> 
            <?php }}?>
         </div>
        </div>

父类别
选择一个
reload（）
确实会重新加载页面，页面的先前状态消失，并创建一个新页面。若要存储页面的上一个状态，可以将其存储在cookie中，或者使用本地/会话存储，当然也可以使用服务器。最简单的方法是省略重新加载。实际上，为单个选择框重新加载整个页面是一种过激行为。是否有其他解决方案来防止重新加载我使用的表单sisyphus函数将所有数据加载到页面或使用。
<script type="text/javascript">
$(document).ready(function() {
  $('#mycolor').css('background-color', $('#mycolor').val());

  $("#mycolor").colorpicker({});

  $("#mycolor").on("change.color", function(event, color){

       var url='<?php echo base_url() ?>admin_control/ajax_addProduct_color';
       var product_id=$("#product_id").val();

       $.post(url, {color:color,product:product_id}, function(result)
          {
            $('#selected-color').html(result);
             location.reload();

          });
  });
<script>