Can't get the selected value of a dropdown in php

Question

The dropdown in question is called subCategory , it's contents are populated by selecting another dropdown category that its onchange event is triggering an ajax request.

The problem is that even though that the contents of subcategory are populated (visible) as expected and I can see them and select them in the subcategory dropdown, when I perform the php post I can only get the value the initial option <option value="subCategory1">Select a subcategory</option> no matter if I select any other elements.

Maybe the dom doesn't refresh but I am not sure..

PHP print_r of $_REQUEST straight after submit

Array ( [act] => additem  [category] => 200381 [subCategory] => subCategory )

HTML (edited)

<form id="additemform" action="add-item.php?act=additem" method="post" enctype='multipart/form-data'>
    <div id="section-category">
        <select id="category" class="category"  name="category">
            <option value="category1">Select a category</option>
            {html_options values=$cat_id_array  options=$cat_names_array selected=$smarty.session.additem_category} 
        </select>
        <p class="test" id="boxCity">
        <select id="subCategory"  class="subCategory" name="subCategory">
            <option value="subCategory1">Select a subcategory</option>
                {html_options  options=$smarty.session.subcategories selected=$smarty.session.additem_subcategory}
        </select>
        </p>
    </div>
    <!--/#section-category-->
    <div class="bottom-area">
        <input id="submit-addItem" type="button" value="Add my item" />
    </div>                    
</form>

PAGE SOURCE:

<div id="section-category">
 <select id="category" class="category"  name="category">
    <option value="category1">Select a category</option>
    <option value="200381" selected="selected">Antiques</option>
    <option value="200841" >Other cat</option>
</select>
<p class="test" id="boxCity">
<select id="subCategory"  class="subCategory" name="subCategory">
    <option value="subCategory1">Select a subcategory</option>
    <option value="23430118">Digital Art</option>
    <option value="6643435">Photographic Images</option>
</select>
</p>
</div><!--/#section-category-->

JQUERY

$(function () {
    //$("#subCategory").selectbox();
    $("#section-category #category").selectbox({
    onChange: function () {
        var id=$(this).val(); 
        var dataString = 'id='+ id;  

        $.ajax  
        ({  
        type: "POST",  
        url: "findsub.php",  
        data: dataString,  
        cache: false,  
        success: function(html)  
        {  
            //$("#subCategory").selectbox("detach")
            $("#subCategory").html(html);
        // $("#section-category #subCategory").selectbox();
        }  
    }); 


},
effect: "slide"
}); 

$('.subCategory').change(function() {
//NOTE I CAN SEE THE SELECTED VALUE OF THE SUBCATEGORY NORMALLY IN THIS ALERT   
    alert($(this).serialize());
return false;
});

Answer 1

The reason that this was not working is that I had another select box (further down) with the same name and first option as the subcategory, the PHP was taking this value .

This now works,thanks