«
»

Add Dropdown List Dynamically using Ajax and PHP

Hello Developers, this blog post is how to add dropdown list dynamically using ajax and PHP. Here you will get step by step instruction and code for adding dropdown by ajax without any page refresh.
In this case we are using ajax call by return type “HTML” and that data value should come from database by connceting database connection in Ajax page. see all the code below.



 

Step-1:
Connection with database:
dbconnect.php

 

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
 
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

Step-2:



Calling Ajax page

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="row">
 
<div class="col-sm-4">
<div class="form-group">
<label>Billing County</label>
<select id='billing_country' name='billing_country' class="form-control" required
<span style="color: #800000;" data-mce-style="color: #800000;">onchange="geturl(this.value)"</span>>
<option value="">---Select ---</option>
<option value="india">Local</option>
<option value="NIR">OVERSEAS</option>
 
</select>
 
 
 
</div></div></div>
 
 
<div class="row">
<div class="col-sm-4">
 
<div class="form-group">
<label>Customer</label>
<select id='customer_id' name='customer_id' class="form-control" required>
 
 
</select>
 
 
</select>
</div>
</div>
</div>
<script>
function geturl(val){
if(val == "india"){
jQuery.ajax({
type: 'POST',
url: "data.php",
data: {customer_type:val,get_cus_list:1},
dataType: "html",
success: function(result) {
// alert("Save Complete"+result.customer_id);
// $('#customer_name option[x='+result.customer_id+']').prop('selected',true);
$('#customer_id').html(result);
}
});
 
 
}
</script>

 

Step-3:



Ajax page:

data.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
header("Access-Control-Allow-Origin: *");
include_once("dbconnect.php");
if(isset($_POST['get_cus_list']) && isset($_POST['customer_type']) && $_POST['get_cus_list']='1'){
 
if($_POST['customer_type'] =='india'){
$query="SELECT * FROM customers WHERE currency='INR'";
 
}else{
$query="SELECT * FROM customers WHERE currency='USD'";
}
 
$html ='<option >--- Select Customer ---</option>';
$result_c = mysqli_query($conn, $query);
if ($result_c->num_rows > 0) {
while($row_c = $result_c->fetch_assoc())
{
$html .='<option value="'.$row_c['customer_id'].'">'.$row_c['customer_name'].'</option>';
}
echo $html;
}
}
 
?>

Step-4:

Database file with table:



Let the table name is customers table;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
CREATE TABLE `customers` (
`customer_id` int(11) NOT NULL,
`customer_name` varchar(25) NOT NULL,
`short_name` varchar(5) DEFAULT NULL,
`customer_person` varchar(25) NOT NULL,
`customer_email` varchar(1000) NOT NULL,
`customer_mobile` varchar(25) NOT NULL,
`customer_account` varchar(50) NOT NULL,
`product` varchar(250) DEFAULT NULL,
`address` text DEFAULT NULL,
`billing_name` varchar(250) NOT NULL,
`city` varchar(250) NOT NULL,
`postal_code` int(8) NOT NULL,
`customer_type` tinyint(1) DEFAULT 0 COMMENT '0=>Prospective Customer,1=>Customer,2=>Lead Customer',
`designation` text DEFAULT NULL,
`landline` varchar(15) DEFAULT NULL,
`ext` int(10) DEFAULT NULL,
`vat` varchar(50) NOT NULL,
`currency` varchar(10) NOT NULL,
`gst_type` varchar(20) NOT NULL,
`user_id` int(11) NOT NULL,
`created_date` datetime DEFAULT NULL,
`updated_date` datetime DEFAULT NULL,
`status` tinyint(4) NOT NULL DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
 
INSERT INTO `customers` (`customer_id`, `customer_name`, `short_name`, `customer_person`, `customer_email`, `customer_mobile`, `customer_account`, `product`, `address`, `billing_name`, `city`, `postal_code`, `customer_type`, `designation`, `landline`, `ext`, `vat`, `currency`, `gst_type`, `user_id`, `created_date`, `updated_date`, `status`) VALUES
(1, 'Saroj Dalai', 'saroj', 'Saroj', 'sarojkumar@gmail.com', '535353535', 'ATS#232', NULL, 'Near Kondapur Bus stand', 'tukuna1', 'Hyderabad', 34535, 1, 'Project manager', '3535353', 35, '06AAFC14694E1ZH', 'INR', 'Local', 1, '2021-04-26 10:27:44', '2021-09-09 12:36:47', 1),
(2, 'Avinash', 're', 'avi', 'avi@gmail.com', '656532333', 'AGS#1', NULL, 'Hitech', 'Abinas', 'Hyderabad', 500081, 0, 'Manager', '', 0, 'Gd5w454kskksd', 'USD', 'None', 1, '2021-09-08 15:28:02', '2021-09-09 12:38:47', 1);
 
ALTER TABLE `customers`
MODIFY `customer_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

 

Tags: , ,
«
»