How to Complete the Options of a Select with AJAX

Question

How to Complete the Options of a Select with AJAX

Navigation

#1 by (0 votes)

0

I am trying to give options to my select by clicking on a button, but it does not show me. My index is as follows:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <!--<script src="ss/code/highcharts.js"></script>-->
     <script type="text/javascript" src="https://code.highcharts.com/highcharts.js" ></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 </head>
 <script type="text/javascript">
    function completa(){

        $.ajax({
            data: "",
            url:"opciones.php",
            type:"POST",
            success: function(vista){
                $("#complet_opt").html(vista);
            }
        });
    }
  </script>
  <body>
<button type='button' class="btn btn-info" onclick="completa();"> Modificar</button>
    </br></br></br>
<label style="color: #ff0000" >WEEK:</label>

<select class="form-control" name="week" id="week" >
<option value="">Seleccione:</option>
<div id="complet_opt" >
</div>
</select>

</body>
</html>

and where values will be from sera.php:

<?php
 $con = mysql_connect("localhost","root","");
 mysql_select_db("mi_base",$con);
 $consulta_semana= mysql_query("SELECT DISTINCT(week) as y FROM datos "); 
  while($data= mysql_fetch_array($consulta_semana)){
  echo "<option value='".$data['y']."' $selected>".$data['y']."</option>"; 
  }
?>

but it can not be shown, what is it missing?

javascript php ajax

asked by Kevincs7 31.10.2018 в 21:44

source

1 answer

Pass variables from javascript to php and vice versa [duplicated] Error in option display list C ++ (simple linked list)

score 0 · Answer 1

The correct way is to put the options directly in the select, not within a <div/> in the select (which is not valid):

<select class="form-control" name="week" id="week" >
    <option value="">Seleccione:</option>
</select>

<script type="text/javascript">
function completa(){

    $.ajax({
        data: "",
        url:"opciones.php",
        type:"POST",
        success: function(vista){
            $(".form-control").html(vista);
        }
    });
}
</script>

I'll copy the example code:

const opciones = '<option>Opcion 1</option><option>Opcion 2</option><option>Opcion 3</option>';

$(document).ready(function(){
    $('button').on('click', function(){
      $('.select-destino').html(opciones);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-destino"><option>Seleccione una...</option></select>
<button type="button">Agregar opciones!</button>