Question

My select element in my HTML is as below;

    <select id="ddlCats">
    </select>

I use jQuery to fill it on $(document).ready:

// some ajax call
    $.each(msg.cats, function (i, cat) {
         $('#ddlCats').append(
    $('<option></option>').val(cat.catID).html(cat.catName)
    );
    });

this works fine and the list generates fine with:

<select id="ddlCats">
   <option value="68" selected="selected">option 1</option>
   <option value="59">option 2</option>
   <option value="60">option 3</option>
   <option value="62">option 4</option>
</select>

until up to a point where I try to access the selected item’s value with:

$('#ddlCats').val();

which always `returns 0. I also tried other avaliable selectors with no luck.

any ideas?

Answer 1

select elements are always annoying. Try this:

$("#ddlCats option:selected").val();