jquery - Selected listbox item as undefined

Question

<script>
    $(function () {
        $("select[name='CusList']").removeAttr('multiple');
        $("select[name='CusList']").attr('size', '8');
        $("select[name='CusList']").find('option:first').attr('selected', 'selected');
        //fx();
    });

    function fx() {
        var resid = $("select[name='resourcename']").val();
        alert(resid);            
    }
</script>

@Html.ListBox("CusList", ((List<SelectListItem>)ViewData["Customer"]), new { @class = "k-list"})

I tried to call fx() from the pageload(on controller) and also inside the function(). Both alert as undefined

<script>
    $(document).ready (function(){
        $('#CusList').bind("click", function () {
            debugger;
            var resid = document.getElementById('CusList');
            var id = resid.options[resid.selectedIndex].value;
            alert(id); //this gives me id correcly, so ly listbox is correct for sure
        });
    });
</script>

Please help.

Answer 1

In the fx() function you're looking for a select named resourcename, yet your C# code is creating one called CusList.

Try this:

$(function () {
    $("select[name='CusList']")
        .removeAttr('multiple')
        .attr('size', '8')
        .find('option:first').attr('selected', 'selected');
    fx();
});

function fx() {
    var resid = $("select[name='CusList']").val();
    alert(resid);            
}