display data from database on select tag using jquery

Question

tbl_fruits

  id   |    name     |
   1   |   banna     |
   2   |   apple     |
   3   |   orange    |
   4   |   kiwi      |

and i have my html script..

<form id="form-add_users" autocomplete="off">
 <div class="modal-content">
  <div class="modal-header">
    <h3 class="modal-title" id="myModalLabel3"><i class="i-user-add"></i> Add 
     User</h3> 
  </div>
  <div class="modal-body">
    <div class="col-sm-2 control-label">What is your favorite fruit </div>
   <select class="select2" id="fruits" name="fruits">
    <option value="">Choose one- </option>
   </select>
  </div
 </div>
</form

what i wanted to achieve is to display the data from tbl_fruits to my select tag... is there any way to do it in jquery?.. like when i click the button for adding a user the select tag will display my data from db...what im trying to do is to dynamically change the data from select...

 $.ajax({
      type: 'POST',
      url:'../ajax/add_user.php',
      dataType:'JSON',
      data:formData,
      cache:false,
      contentType:false,
      processData:false,
      success:function(result){
        if (result) {
          swal("Success!", "User has been added", "success");
          setTimeout(function () {
          $('#modal-add_users').modal('hide');
          }, 2000);
          var rowData = params.reduce(function(obj, item) {
              obj[item.name] = item.value;
              return obj;
          }, {});
              rowData['users_id'] = result;
              datatable.row.add(rowData).draw(); 
        } else {
          swal("Error", "An error occured.!", "error");
          console.log(result);
        } 
      },
      error:function(status){
        console.log(status.responseText);
      }
    });

here is my ajax code so far.

this is what i did based on the answer:

$('#btn-add_procedure').click(function(){
        $.ajax({
            url:'../ajax/gettest.php',
            type:'GET',
            success:function(result){
                for(item in result){
                    $('#fruits').append('<option value='+result[item].name'>'+result[item].name+'</option>');
                }
            },
            error:function(status){
                alert('error');
            }
        });

  $('#modal-add_procedure').modal({backdrop: 'static', keyboard: true});

});

but nothing works... i cant even open my modal.. gettest.php

$data = $test->getTest();
    echo json_encode($data);

and here is my query that is being requested..

public function getTest()
{
    $sql="SELECT * FROM tbl_test";
    $view = $this->dbh->prepare($sql);
    $view->execute();
    $data = $view->fetchAll(PDO::FETCH_ASSOC);
    return $data;
}

don't expect code samples on SO. Show us what have you tried so far. — ScanQR, May 10 '17 at 05:27
Use jquery ajax to fetch the data and append that data to select options on button click event [check this](http://stackoverflow.com/questions/35203019/how-can-i-send-an-ajax-request-on-button-click-from-a-form-with-2-buttons) for reference. — Poorna Rao, May 10 '17 at 05:30
i only have the code for the static but haven't tried to do it yet.. — Lion Smith, May 10 '17 at 05:30
client side javascript does not interact with database. You need some server side language like python, PHP or nodejs to deal with your database. Also, `dataTable` is not to be confused with database tables. `DataTables` is a jquery plugin for rendering tables on the front end. Where as database tables are stored in a server like MySQL or Postgres. — sid-m, May 10 '17 at 05:41

score 0 · Answer 1 · answered May 10 '17 at 05:41

You can do it using any of below approach:

  var optionsList = "";
    for(var i = 0; i < result.length; i++) {
        optionsList += "<option value='" + result[i] + "'>" + result[i] + "</option>";
    }
    $('#fruits').append(optionsList);

OR

var optionsList = "";
$.each( result, function( key, value ) {
  optionsList += "<option value='" + value.Value + "'>" + value.Text + "</option>";
});
}
$('#fruits').append(optionsList);

score 0 · Accepted Answer · answered May 10 '17 at 06:36

0

Please check below approach

$("#butonID").click(function(e){
          e.preventDefault();
            $.ajax({type: "GET",
                url: "/pages/test",
                success:function(result){
                 for(item in result)
                  $("#mySelect").append('<option value='+result[item].id+'>'+result[item].name+'</option>');
                },
               error:function(result)
                {
                alert('error');
               }
           });
      });
    });

answered May 10 '17 at 06:36

Poorna Rao

335
4
20

what happens now the list of my `` – Lion Smith May 10 '17 at 10:49
You have to send json data to url request.I just added sample url you have to customize it. – Poorna Rao May 10 '17 at 11:41

display data from database on select tag using jquery

2 Answers2