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