Populate multiple select box with jquery and laravel

Question

I am using laravel and i need to populate multiple select according to what user choose from a database. I have 2 select box, one choose category, then once i choose the category, the second select box is populated with product. Once the second select is populate with product i need to fetch from database all the description of that product and show in a form so it can be modified.

I did a Route:

 Route::get('api/dropdown', function(){
            $input =Input::get('option');

                $prodotti= DB::table('prod')                
                    ->join('cat','cat.id_prod','=','prod.id')
                    ->where('cat.id','=',$input)
                    ->select('prod.id as idprod','prod.nome as nomeprod')
                    ->lists('nomeprod','idprod');


            return Response::json($prodotti);
            });

This should send a response

{{ Form::open(array('url' => 'admin/create/mod', 'files'=> true)) }}
        <span>
        {{ Form::select('categorie',  $categorie,'default', array('id'=> 'a')) }}
            <br/>

        {{ Form::select('a',array('a'=> 'scegli'),'default', array('id'=> 'b')) }}

        Scegli il nome del prodotto

        {{Form::text('nome')}}
        <br/>
        {{Form::label('*Descrizione in Italiano')}}
        <br/>
        {{Form::textarea('descrizioneit','',array('id'=>'descrizioneit'))}}
        {{Form::textarea('descrizioneit','',array('id'=>'previewit', 'readonly'=>'readonly', 'onfocus'=>'this.blur();'))}}
        <br/>
        {{Form::label('*Descrizione in Inglese')}}
        <br/>
        {{Form::textarea('descrizioneen','',array('id'=>'descrizioneen'))}}
        {{Form::textarea('descrizioneen','',array('id'=>'previewen', 'readonly'=>'readonly', 'onfocus'=>'this.blur();'))}}
        <br/>

{{Form::close()}}

This is my javascript

jQuery(document).ready(function($){
    $('#a').change(function(){
            $.get("{{ URL::to('api/dropdown')}}", 
                { option: $(this).val() }, 
                function(data) {
                    var model = $('#b');
                    model.empty();

                    $.each(data, function(element) {
                        model.html(element);
                    });
                });
        });
    });

Then i should do another api to populate the textbox with the product description i have chosen?

I would follow this idea but even the firt part of this doesn't work. It seems that my javascript code is ignored.

By first part, you mean the route? I believe you should be returning json so try return Response::json($prodotti); and go to that route in your browser. You should be seeing some text on the screen. — user1669496
– user1669496, Commented Apr 10, 2014 at 13:45
yeah, i am seeing it, the probably error is in the javascript, i can't use well jquery. I already added Json and i query api/dropdown?option=1 and i get the right response from the database — user3384514
– user3384514, Commented Apr 10, 2014 at 13:47
Okay, so what I would do is make sure your event handlers are working. Try adding alert('working'); right after $('#a').change(function(){ and it should alert each time it's changed, just to make sure it's working. — user1669496
– user1669496, Commented Apr 10, 2014 at 13:50
yes yes i already do it i got the right alert with the value of option choosen — user3384514
– user3384514, Commented Apr 10, 2014 at 13:52

user1669496 · Accepted Answer · 2014-04-10 17:05:40Z

1

The problem lies in how you are filling out your select.

jQuery(document).ready(function($){
    $('#a').change(function(){
        $.get("{{ URL::to('api/dropdown')}}", 
            { option: $(this).val() }, 
            function(data) {
                var model = $('#b');
                model.empty();

                $.each(data, function(index, value) {     
                     model.append($("<option />").val(index).text(value)); });
                });
          });
    });
});

edited Apr 10, 2014 at 17:05

answered Apr 10, 2014 at 15:32

user1669496

33.3k9 gold badges76 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3384514 Over a year ago

actually i populate with $.each(data, function(index, value) { model.append($("<option />").val(index).text(value)); }); coz i am populating from a list but your answer drive me on the right way ty

Terabyte · Accepted Answer · 2014-04-10 11:15:29Z

Ok try to read and analyze this one its more like what you looking for

<?php
   require_once('func.inc.php'); //Connection script remember
   connect();
    ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>testDroplistdown</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>

  <body>
  <p align="center">
  <div id="dropdown1div"><select id="dropdown1" name="dropdown">
  <?php countryQuery(); ?>
  </select></div>
  </p>
  <br />
  <br />

  <p align="center">
  <div id="dropdown2div"></div>
  </p>

  <p align="left">
  <div id="dropdown3div"></div>

    <script type="text/javascript">
    $("#dropdown").change(function() {
    val = $(this).val();
    var html = $.ajax({
    url: "dropdown_select.php?dropdown=2&val="+val+"",
    async: true,
    success: function(data) {
    $('#dropdown2div').html(data);
    }////////////function html////////
    })/////////function ajax//////////
     });
    </script>

   <?php close(); ?>
   </p>


   </body>
   </html>

dropdown_select.php

 <?php
   require_once('func.inc.php');
   connect();
    if(isset($_GET['val'])){   
    $val = $_GET['val'];
    $dropdown = $_GET['dropdown'];
    }


    if($dropdown == '2'){
    echo '<select id="dropdown2" name="dropdown2">';
    governorateQuery();
    echo '</select>';
    ?>
     <script type="text/javascript">
     $("#dropdown2").change(function() {
     val = $(this).val();
     var html = $.ajax({
     url: "dropdown_select.php?dropdown=3&val="+val+"",
     async: true,
     success: function(data) {
     $('#dropdown3div').html(data);
     }////////////function html////////
     })/////////function ajax//////////
     });
    </script>

      } // end if statement



    if($dropdown == '3'){
     echo '<select id="dropdown3" name="dropdown3">';
     specializationQuery();       
     echo '</select>';
       } // end if statement
  close();
  ?>

Collectives™ on Stack Overflow

Populate multiple select box with jquery and laravel

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related