Dynamically dropdown List

Dynamically dropdown List

Hello,

I am dynamically creates a table with 2 dropdown (Container Type & Container Id)
using the code listed.
The table was created successfully with two dropdown but
the statement listed below did not get executed, the alert did not popup.

      $('#SelContainerTypeId option').each(function(name, val) {
            var opt=val.text;
              alert("Value Text " + opt);  ???? 
      });

** I did not understand why the alert did not popup, anything wrong with the code ?

Thanks for any advise.


<div>
      <table cellspacing="0"  border="1" id="CubeTable" style="border-collapse: collapse;">
             <tbody>
           <tr>
                     <th>Level</th>
              <th>Container Type</th>
               <th>Container Id</th>
               <th>Priority</th>
    </tr>
          </tbody>
    </table>
</div>


jQuery(document).ready(function() {

 var level = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",                         "U", "V", "W", "X", "Y", "Z" ];


var containerTypeOption="";
containerTypeOption+="<select id=' SelContainerTypeId' ><option value='TOTE'>Regular Tote</option><option value='PUTWALL TOTE'>Put Wall ToTe</option></select>";
var containerIdOption="";
containerIdOption+="<select id='SelContainerId' ><option value='Large Tote'>Large Tote</option><option value='Small Tote'>Small ToTe</option></select>";
var level_bw = 0;
var numberOfLevel  = 6;
var priority = 3;

for(i=0;i<numberOfLevel;i++) {
       level_bw = (numberOfLevel - (i + 1));
   $('#CubeTable').append( '<tr><td class="levelC">' + level[level_bw]  + '</td><td class="editableC" >'             + containerTypeOption  + '</td><td class="editableC" >' + containerIdOption  + '</td><td             class="editableC" >' + priority  + '</td></tr>' );
}

$('#SelContainerTypeId option').each(function(name, val) {
var opt=val.text;
        alert("Value Text " + opt);  ???? 
});

});