How to populate Select Option using ajax?

Question

I want to populate my select option using ajax, when i clicked the "Detail" button. the option is from the database, i've tried :

The Select Option :

<select id="update_listboxstock" size="5" class="form-control">

</select>

Button's Code :

<td style="text-align:center;">
       <button onclick="GetMenuDetails('.$row['kode_menu'].')" class="btn btn-warning" data-toggle="modal" data-target="#update_record_modal">Perbarui/Detail</button>
    </td>

Javascript :

function GetMenuDetails(id) {
        $.get("function_and_ajax/ajax.php",{
            ajx:"GetRecipe",
            kode_menu:id
        },function(result){
            $("update_listboxstock").html(result);
        });
    }

AJAX :

  include("function_connection.php");

    if(isset($_GET['ajx'])){
        if($_GET['ajx'] == 'GetRecipe'){
            $kode_menu = $_GET['kode_menu'];
            GetRecipe($kode_menu);
        }
    }

function GetRecipe :

function GetRecipe($kode_menu){
            $conn = getConnection();
            echo "<option>".$_SESSION["kode_menu"]."</option>";
            $query = "SELECT DISTINCT S.NAMA_BARANG AS NAMA_BARANG, MD.JUMLAH AS JUMLAH, S.SATUAN AS SATUAN, S.KODE_STOK AS KODE_STOK FROM STOCKS S, MENUDETAILS MD, MENUS M WHERE S.KODE_STOK = MD.KODE_STOK AND MD.KODE_MENU = '".$_SESSION["kode_menu"]."'";
            $conn=getConnection();
            $result = $conn->query($query);
            if ($result->num_rows > 0){
                while($row = $result->fetch_assoc()){
                    echo "<option value=".$row['kode_stok'].">
                        ".$row['NAMA_BARANG'].
                        " - ".
                        $row['JUMLAH']." ".$row['SATUAN']."
                    </option>";
                }
            }
     }

Sorry for my bad English...

Abdennour TOUMI · Accepted Answer · 2017-02-25 03:48:02Z

1

You have an error in GetMenuDetails js function :

        $("#update_listboxstock").html(result);

and Not :

        $("update_listboxstock").html(result);

Since update_listboxstock is the ID of this Select.

answered Feb 25, 2017 at 3:48

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

Comments

Shubhranshu · Accepted Answer · 2017-02-25 03:52:06Z

0

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
 function GetMenuDetails(id) {
    $.get("function_and_ajax/ajax.php",{
        ajx:"GetRecipe",
        kode_menu:id
    },function(result){
       $.each(result, function(val, text) {
        $('#update_listboxstock').append( $('<option></option>').val(val).html(text) )
        });
       });

    });
}



</script>
</head>
<body>

<select id="update_listboxstock" size="5" class="form-control">

</select>
</body>
</html>

answered Feb 25, 2017 at 3:52

Shubhranshu

5213 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to populate Select Option using ajax?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related