how to fill a select with another selct from ajax

Question

how to fill a select with another selct from ajax

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello community, I have the following problem, I need to fill select with another select from ajax .

I explain myself: I have a select in this way in my file html

 <div class="form-group mt-1">
  <select class="form-control mt-1" id="frutas">
       <option value="manzana">manzana</option>
       <option value="uva">uva</option>
       <option value="pera">pera</option>
      </select>
 </div>

   <div class="form-group mt-1">
        <!--este select es el que nececito llenar segun la fruta-->
      <select class="form-control mt-1" id="clave-frutas">
      </select>
 </div>

What I need is to replace only the options from ana call to ajax , for example I'm trying to do the following ...

file JS

$('#frutas').change(function(){

    var category=$(this).val();
    var url="ajax/select_category.php";

         $.ajax({

           url:url,
           type:"POST",
           data:{category:category}

         }).done(function(data){

               $("#clave-fruta").html(data);
         })    
     })

and in my file select_category.php I have the following ..

<?php

 $category=$_POST["category"];

 if ($category=="pera"){ ?>

     <option value="granada">granada</option>
     <option value="metralleta">metralleta</option>
     <option value="pistola">pistola</option>

  <?php }elseif($category=="manzana"){?>

      <option value="cervesa">cervesa</option>
      <option value="vino">vino</option>
      <option value="champaña">champaña</option>

 <?php }elseif($category=="uva"){?>

      <option value="informatica">informatica</option>
      <option value="programacion">programacion</option>
      <option value="diseño">diseño</option>


 }   ?>

at the time of the ajax return those options the strip out of the select ie I expect an input type select normal, but I throw the options out as if they were plain text and come like this for example if I choose apple

          cervesa
          vino 
          champaña

How could I achieve what I need some solution that I am doing wrong? thanks in advance

jquery ajax select

asked by andy gibbs 24.09.2018 в 22:23

source

2 answers

The intent does not want to work to open another activity Crystal Reports does not show new fields

score 0 · Answer 1

In php you are generating the HTML directly without returning anything. You must return a string that contains the HTML you want. Something like this:

<?php

 $category=$_POST["category"];

 if ($category=="pera"){ 

     echo '<option value="granada">granada</option>
     <option value="metralleta">metralleta</option>
     <option value="pistola">pistola</option>';

  } elseif ($category=="manzana"){

      echo '<option value="cervesa">cervesa</option>
      <option value="vino">vino</option>
      <option value="champaña">champaña</option>';

 } elseif ($category=="uva"){

      echo '<option value="informatica">informatica</option>
      <option value="programacion">programacion</option>
      <option value="diseño">diseño</option>';


 }   ?>

score 0 · Answer 2

your code is not very understandable ..

This is an example, on which you can base to fill a select. in your html

<select id="dropdown"></select>

In your java file ...

$.ajax({
            type: "POST",
            url: urlPath, // "ajax/select_category.php";
            success: function(data)
            {
                helpers.buildDropdown(
                    jQuery.parseJSON(data),
                    $('#dropdown'),
                    'Select an option'
                );
            }
        });

IN YOUR PHP FILE the one that answers the request, ajax. should debug a json .. with the following structure

 {
     key:value
 }

in this case .. I put an arrangement of objects ..

[

    {"id":1,"name":"Option 1"},

    {"id":2,"name":"Option 2"},

    {"id":3,"name":"Option 3"},

    {"id":4,"name":"Option 4"},

    {"id":5,"name":"Option 5"},

]

If you noticed the ajax request, when it is successful. call a helper .. call buildDropdow .. this is the code ..

var helpers =

{

    buildDropdown: function(result, dropdown, emptyMessage)

    {

        // Remove current options

        dropdown.html('');

        // Add the empty option with the empty message

        dropdown.append('<option value="">' + emptyMessage + '</option>');

        // Check result isnt empty

        if(result != '')

        {

            // Loop through each of the results and append the option to the dropdown

            $.each(result, function(k, v) {

                dropdown.append('<option value="' + v.id + '">' + v.name + '</option>');

            });

        }

    }

}

who is responsible for building it ..

in your case the select_category.php should debug an array ..

that being parsed in json ..

returns the data as they are spelled .. in a json ..

if($category=="manzana")
  $arr = array( value => 'Cerveza', value => 'Vino', value => 'Champaña');

echo json_encode($arr);

I hope I've illustrated you ...