函数内的事件侦听器

Question

I have a select on my page:

<select id='cat'>
    <option value='a'>A</option>
    <option value='b'>B</option>
    <option value='all'>all</option>
</select>

With a javascript function that handles which options have to be displayed:

function funcName(aList) {
    // populates the options for the select tag
    $("#cat").on("change", function(){
        // some computation;
    });
    // uses aList to update some div data
 }

What I'm trying to do is if the selected option is all , I have to display everything in aList , otherwise based on the selected option I have to display only the related options. Is my usage of onchange event correct?

Initially I thought of making aList global, but after some reading on globals in JS, I got to know it is not a very good practice.

Thanks in advance!

UPDATE: aList contains some string values.

Answer 1

 $(function () { $("#ddl").change(function () { var selectedText = $(this).find("option:selected").text(); var selectedValue = $(this).val(); var assignedRoleId = new Array(); alert("Selected Text: " + selectedText + " Value: " + selectedValue); if(selectedValue== "all") { $("#ddl option").each(function() { if(this.value=="all") { assignedRoleId.push(); } else { assignedRoleId.push(this.value); assignedRoleId.push(" "); $("#selected").html(assignedRoleId); } }); } }); });

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> Select something: <select id="ddl"> <option value="">select one</option> <option value="a">a</option> <option value="b">b</option> <option value="all">all</option> </select> <div id="selected"> </div>