Keep selected option dynamically loaded

Question

I need to keep the option chosen in the combobox after the page is submitted, I have a function that does this, but only for Estaticas combobox, for dynamic combobox it does not work. I’m already hours researching and I can’t find anything.

function cursos() {

  $.getJSON('https://localhost/uan/curso/pesquisaPor/', {}).done(function(data) {
    $.each(data, function(id, valor) {

      $("#curso").append('<option value="' + valor.id + '">' + valor.nome + '</option>');
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
  <label class="control-label">Curso<span class="required">*</span>
  </label>
  <div class="controls">
    <select class="span6 m-wrap" id="curso" name="curso">
      <option value="">Selecciona um curso</option>
    </select>


  </div>
</div>

The courses function returns all the courses that are in the database and fills the select, dynamically, it turns out that whenever I send the form I wanted it to mark up the selected option..

Answer 1

I believe that an easy way to solve this is by sending the value of select to the page you need.

Let’s assume you get the select thus:

$_POST["lista"];

You can send this variable to the page you want, via POST or via GET.

The moment you’re generating the <option>, you need to check if there is a $_POST["lista"], if yes, use it to mark the option in his select.

Example:

<?php
$lista = array(
  "um" => 1,
  "dois" => 2,
  "tres" => 3,
  "quatro" => 4
);

// Aqui você verifica se a variável $_POST["lista"]
// e não é nula
$selecionado = "tres";
?>

<select name="opcoes">

<?php
foreach($lista as $chave => $valor) {
    if($selecionado == $chave) {
      echo "<option value=".$chave." selected>".$valor."</option>";
    } else {
      echo "<option value=".$chave.">".$valor."</option>";
    }
}
?>
</select>

Answer 2

Add another property to JSON that you return from the server. In addition to id and nome you could join selected, boolean.

Then in Javascript it would be:

$.each(data, function(id, valor) {
      var selected = valor.selected ? 'selected="selected"' : '';
      $("#curso").append('<option ' + selected + ' value="' + valor.id + '">' + valor.nome + '</option>');
});

Answer 3

Pass a parameter through the URL. And recover via get and check in Javascript if there is an option from select equal to the value recovered by get.