javascript - Event listener inside a function -

i have select on page:

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

with javascript function handles options have displayed:

function funcname(alist) {     // populates options select tag     $("#cat").on("change", function(){         // computation;     });     // uses alist update div data  } 

what i'm trying if selected option all, have display in alist, otherwise based on selected option have display related options. usage of onchange event correct?

initially thought of making alist global, after reading on globals in js, got know not practice.

thanks in advance!

update: alist contains string values.

$(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>