jquery trigger

jquery trigger

I am using jquery 1.8.3.I have to populate two dropdown based on the value from another dropdown.I did it but the problem what i facing is the dropdown working great in chrome it is not working perfect in firefox.Here is my code
<script type="text/javascript">
$(document).ready(function(){

        $editid = '<?php echo $addid ?>';
       
       
        //$pages.trigger("change");

       
  var $pages = $('select[name=adPages]'),
  $positions = $('select[name=adPositions]'),
  $dimensions = $('select[name=adDimensions');
 $pages.change(function()
 {   
       $('#adpos').removeAttr('hidden');
       $('#dimpos').removeAttr('hidden');

      var $this = $(this).find(':selected'),
      rel = $this.data('pages');
  // alert(rel);
   $set = $positions.find("[data-pos='" + rel + "']");
   if($set.size() < 0)
   {
       $positons.hide();
       return;
   }
   $positions.show().find('option').hide();
   $set.show().first().prop('selected',true);
   $positions.trigger("change");
    });
   
    $positions.on('change',function()
 {
     var $this = $(this).find(':selected'),
     posrel = $this.data('dimrel');
     //alert(posrel);
     $dim = $dimensions.find("[data-dim='" + posrel + "']");
     if($dim.size() < 0)
     {
         $dimensions.hide();
         return;
     }
     $dimensions.show().find('option').hide();
     $dim.show().first().prop('selected',true);
 });


});
</script>
<script type="text/javascript">
    $(document).ready(function()
    {

        $editid = '<?php echo $addid ?>';
        if($editid>0)
        {
           $('#adpos').removeAttr('hidden');
            $('#dimpos').removeAttr('hidden');

            var $pages = $('select[name=adPages]');
            var $positions = $('select[name=adPositions]');
            $pages.trigger("change");
            $("#adPositions option[data-db-pos='<?php echo $c_SK_Advertisement->m_adPositions; ?>'][data-db-pos-id='<?php echo $c_SK_Advertisement->m_adPages;?>']").prop('selected', true);
            //$positions).trigger("change");
            var $pageid = $('#adPages').val();
            //var $selectedPos = $positions.filter("option[value=" + $positions + "]").prop("selected", true);
           
            console.log('hello');
           
            // alert($selectedPos);
           
       }

     
});
</script>

below given is my page available page is my firstdropdown other two dropdown is populating based on this value in firefox after selecting first dropdown two dropdown is populating.but in the second dropdown the position dropdown the values are not dropping down using mouse.The values can be changed using the arrow keys.with mouse ckick a blue border is coming beneath the select box.In chrome all the dropdowns are working perfectly.Is there anyone knows what's the issue please reply asap