I"m using igCombo with the   <div id="combo_OrderTypes" ></div> example, but when I do a form post to another page I get no value.

But when using <input id="combo" name="combo"> I get  a value. 

I need the <div id="combo_OrderTypes"> to work because I have customized div to work with it.  When I use input it screws up the dropdown.  How to get the value with <div id="combo_OrderTypes" ></div> when I post the form.

<script>

  // OrderType Combobox - On Page Load
                $.get("../order/Json_OrderTypes", function (data) {
                    //Get
                    $("#combo_OrderTypes").igCombo({
                        dataSource: data,
                        selectedItems: [{ index: 5 }, { text: "S" }],
                        valueKey: "Order_Type",
                        textKey: "Order_Type",
                        width: "100px",
                        dropDownWidth: 500,
                        itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${Order_Type}</div><div class='colTwo_NoDash'>${Description}</div></div>"

                    });

                    $("#combo_OrderTypes").igCombo("setFocus");

                }, "json");

</script>

<style type='text/css'>
 
    /* T */
    .comboItemContainer {
        width: auto;
        font-family: "Courier New", Courier, monospace;
    }

    .colOne {
        border-right: 1px dashed gray;
        float: left;
        width: 100px;
    }

    
   .colTwo {
        border-right: 1px dashed gray;
        float: left;
        padding-left: 5px;
        width: 350px;
    }


    .colTwo_NoDash {       
        float: left;
        padding-left: 5px;
        width: 350px;
    }


    .colThree {
        float: left;
        padding-left: 5px;
        width: 100px;
    }
 
   
</style>