I have main categories and Sub categories of products when I select any main category it shows related sub-categories. But When I post the form it posts last sub-category value instead of selected sub-category value.
JavaScript Code
   $(function() {
    $('#category').change(function(){
        $('.sub-category').hide();
        $('#' + $(this).val()).show();
    });
});
HTML code
 <Select id="category" name="product_category">
  <option value="eco">Main Category 1</option>
 <option value="organic">Main Category 2</option>
  </Select>
  <Select name="product_sub" id="eco" class="sub-category">
  <option value="eco1">Sub Category 1</option>
  <option value="eco2">Sub Category 2</option>
   </Select>
<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
  <option value="organic1">Sub Category 3</option>
   <option value="organic2">Sub Category 4</option>
 </Select>
For Example: When I am selecting sub category 1 , its posting value of sub category 3
 
     
    