i've a first html select element which generate a second html select element using a first Ajax Function and it will work correctly. This second html element will generate my third html select element but when i do this code for generating my third selector it don't work. i'm looking to made it anyone could help me?

here is the code:

$("#SystemNameSelection").on('change',function ()
{
   var SystemName = $("#SystemNameSelection").text();
   if (SystemName === "Value1")
   {
   $.ajax({url:"MyFile1.php",success:function(result)
         {
         $("#MyElementToPutTheSelector").html(result);
         }
      });
   }
   else if (SystemName === "Value2")
   {
   $.ajax({url:"MyFile2.php",success:function(result)
         {
         $("#MyElementToPutTheSelector").html(result);
         }
      });
   }
   else if (SystemName === "Value3")
   {
   $.ajax({url:"MyFile3.php",success:function(result)
         {
         $("#MyElementToPutTheSelector").html(result);
         }
      });
   }
});

Myfile1, Myfile2 and MyFile3 contain three different html select element. I've tried also with the .change() method and it's didn't work too.