How To Populate JSON Data In Select Dropdown Using jQuery?

ViewUserData.php


<?php

$DatabaseServer = "localhost";

$DatabaseUsername = "root";

$DatabasePassword = "root";

$DatabaseName = "demo";


$Connection = mysqli_connect($DatabaseServer , $DatabaseUsername ,  $DatabasePassword , $DatabaseName);

 

if($Connection=== false){

    die("ERROR: Could not connect. " . mysqli_connect_error());

}


$SQL = mysqli_query($Connection, "SELECT * FROM User");

$Result = array();


while($Row = mysqli_fetch_assoc($SQL))    {

       $Result[] = array(

          'FirstName' => $Row['FirstName']            

       );

    }


    echo  json_encode($Result);

?>


Output:

JSON Array:



[{"UserID":"1","FirstName":"Ram","LastName":"Sri"}]


ViewUserData.html


<Html>

<head>

<script language="JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready (function () {

            $.getJSON ("ViewUserData.php",

                function (json) {

                    for (var i = 0; i < json.length; i++) {

                        $("#UserID").append("<option>" + json[i].FirstName+ "</option>");

                    }

                });

});

</script>

</head>


<body>


<select id='UserID'>

//Your Json Array comes here
</select>


</body>


</html>


Output:










MySQL: Run these two queries


CREATE TABLE `user` (
  `UserID` int(12) NOT NULL,
  `FirstName` varchar(48) NOT NULL,
  `LastName` varchar(48) NOT NULL,
  `Email` varchar(128) NOT NULL,
  `City` varchar(48) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `City`) VALUES
(1, 'Ram', 'Sri', 'zzz@zzz.com', 'Delhi'),
(2, 'Krishna', 'Vasudev', 'yyy@yyy.com', 'Delhi');

15 comments:

  1. who has implemented it earlier as well and is a certified partner. Here the help of Salesforce domain experts can provide you complete guidance and can implement the Salesforce successfully as well. So you must look for the right partner for your organization, Salesforce interview questions and answers

    ReplyDelete
  2. I have been exploring for a little bit for any high-quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this web site. Reading this information So i am happy to convey that I have an incredibly good uncanny feeling I discovered just what I needed. I most certainly will make certain to do not forget this site and give it a glance regularly.garmin fenix

    ReplyDelete
  3. What’s Going down i'm new to this, I stumbled upon this I've found It positively helpful and it has aided me out loads. I'm hoping to give a contribution & aid different users like its helped me. Great job.casket in singapore

    ReplyDelete
  4. Looking a more unique post from your article.Great Article, very useful information, thank you !!
    Reactjs Training in Chennai |
    Best Reactjs Training Institute in Chennai |
    Reactjs course in Chennai

    ReplyDelete
  5. thank you for sharing this post it is knowledgeable information mcafee.com/activate If you want any information related to the game, then visit this website.

    ReplyDelete
  6. Thank you for your post, myself very happy to read it because it can give me more insight, thanks.. Visit my blog..thankyou

    Naga777
    Hokibet77

    ReplyDelete
  7. Wonderful beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear idea

    Slot Fafafa Uang Asli
    Fa Fa Fa Uang Asli
    Megawin77
    Mega777 Slot
    Slotwin88

    ReplyDelete
  8. Hp officejet pro 8600 driver - We provided easy instruction for hp officejet pro 8600 setup, install, Driver Download, WPS Setup Troubleshooting.Driver and Manuals downloads From 123.hp.com/laserjet.

    www.hp.com/go/wirelessprinting - Download and install your printer driver software. Install your HP printer by visiting 123.hp.com/setup. Make connections to the network.

    ReplyDelete

  9. Need to download Brother Printer drivers open solutions.brother.com/windows to download latest & updated drivers for Brother Printer all models.

    123.hp.com/laserjet Start installing, setting up and Print at 123.hp.com/setup. Download drivers and printer software assistance from 123.hp.com/laserjet.

    hbomax.com/tvsignin - HBO Max is the newly released app, where you can watch endless content. This video-streaming services supports downloads for offline viewing, so that you can stream anywhere.

    ReplyDelete

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts