Recover selected value from a select in the database

Question

I cannot recover the recorded value of select.

I have this recovery by input that is working normally.

<td>
   <div class="drop-down-select opcoes ">
      <label for="bairro">Bairro:</label>
      <input type="text" size="50"  class="form-control" id="bairro" name="bairro" value = "<?php echo $bairro;?>" >
   </div>
</td>
<td>
   <div class="drop-down-select opcoes ">
      <label for="rua">Rua:</label>								
      <input type="text" size="70"  class="form-control" id="rua" name="rua" value = "<?php echo $rua;?>" >
   </div>									
</td>

But if possible, wanted to recover this data by Select, follow the code below...

<td width="160">
   <div class="drop-down-select opcoes ">
      <label for="bairro">Bairro:</label>
      <select name="bairro" id="bairro" required>
         <option value="">Selecione</option>
         <?php foreach ($bairros as $bairro) { ?>
         <option value="<?php echo $bairro['id'] ?>"><?php echo $bairro['nome'] ?></option>
         <?php } ?>
      </select>
   </div>
</td>
<td>
   <div class="drop-down-select opcoes ">
      <label for="rua">Rua:</label>
      <select name="rua" id="rua" disabled required>
         <option value="<?php $rua; ?>">Selecione uma Rua</option>
      </select>	
   </div>									
</td>

This is the same dynamic select I use for registration. Thank you in advance.

Answer 1

Is there an error in the console/page? The neighborhood select seems correct.

One thing I don’t understand in your code is if $rua is an ARRAY of streets, or if it’s just an option. If there is more than one street to be chosen, you should use a foreach exactly as Voce used in the neighborhood.

I adjusted a part of the HTML code, and gave two options to get the element with Javascript.

Here you find an example with angular 1, if you are using.

// JS PURO:
var meuElementoHTML = document.getElementById("rua"); // armazena o ELEMENTO HTML com id RUA na variável meuElementoHTML
var value = meuElementoHTML.options[meuElementoHTML.selectedIndex].value;
console.log(meuElementoHTM);
console.log(value);

// J QUERY:
$("#rua :selected").text(); // Texto exibido nesse elemento
$("#rua").val(); // Valor da opção selecionada

<td width="160">
   <div class="drop-down-select opcoes ">
      <label for="bairro">Bairro:</label>
      <select name="bairro" id="bairro" required>
         <option value="">Selecione</option>
         <?php foreach ($bairros as $bairro) { ?>
         <option value="<?php echo $bairro['id'] ?>"><?php echo $bairro['nome'] ?></option>
         <?php } ?>
      </select>
   </div>
</td>
<td>
   <div class="drop-down-select opcoes ">
      <label for="rua">Rua:</label>
      <select name="rua" id="rua" required>
      <option value="">Selecione uma Rua</option>
         <option value="<?php echo $rua; ?>"><?php echo $rua?></option> <!-- TINHA FALTADO O ECHO PRA PRINTAR A VARIAVEL RUA -->
      </select>	
   </div>									
</td>