save option added in input select after refresh

Question

I've made a function with javascript that can add an option in input select if it not exist by selecting option other but after refresh the option added disappear I want to keep it after refresh but i don't know how to do it please if anyone can help i'll be very grateful.

here is my function to add option select:

  <script type="text/JavaScript"> 
  function AjoutOptionAuSelect(this_select){
      if (this_select.value == "autreVille"){
          var saisie;
          var pass = false;
          do{
              if (pass) 
                  alert("La valeur est incorrecte. Elle ne doit comporter que des lettres.");
              saisie = prompt("Entrer la nouvelle valeur :");

              if (saisie == null) return false;
                  pass = true;
          }
          while (saisie.match(/[^a-z^éèàç]/i) && saisie != "") 
          this_select.options[this_select.length] = new Option(saisie, saisie,true,true);
          for (var i=0; i < this_select.options.length; i++){
              if (this_select.options[i].value == saisie)
              {
                  this_select.options[i].selected = true;
              }
          }
      } 
  }
</script>

and input select:

  <?= $this->Form->input('ville',
      array(
          'label'=> false,
          'options'   => array('Casablanca'=>'Casablanca','Rabat'=>'Rabat', 'Fès'=>'Fès','Tanger'=>'Tanger','Marrakech'=>'Marrakech',
          'Essaouira'=>'Essaouira','autreVille'=> 'autreVille' ), 
          'class'   => 'form-control ',
          'id'=>'ville',
          'onChange'=> "AjoutOptionAuSelect(this);"
      )
  ); ?> 

Answer 1

You should store your array with options for select somewhere (in a file, or in a db, or memory), and after adding an option to your select on client side, you should send an ajax request to the server, to update your array. On next render of select, there would be new options.