PHP Tutorals for beginners step by step with advance topic example: php dropdown

Showing posts with label php dropdown. Show all posts

You already know that in HTML there is no search option in the dropdown element.

When you press any single key in the dropdown then it takes you to the option but not allows you to search whole or particular string.
Searching is required on the list when there is a long list of items are available.
It is time-consuming to find the option by scrolling the list.
In this tutorial, I show how you create a dropdown with search box using the select2 plugin and read the selected option.

1. Download and Include

Download select2 library from GitHub.
Include select2.min.css and select2.min.js with jQuery library in <head> section.

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='select2/dist/js/select2.min.js' type='text/javascript'></script>

<!-- CSS -->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>

2. HTML

Create a dropdown element and added some options. Also created a button to read selected dropdown option and display in <div id='result'>.
Completed Code

<!-- Dropdown --> 
<select id='selUser' style='width: 200px;'>
  <option value='0'>Select User</option> 
  <option value='1'>Yogesh singh</option> 
  <option value='2'>Sonarika Bhadoria</option> 
  <option value='3'>Anil Singh</option> 
  <option value='4'>Vishal Sahu</option> 
  <option value='5'>Mayank Patidar</option> 
  <option value='6'>Vijay Mourya</option> 
  <option value='7'>Rakesh sahu</option> 
</select>

<input type='button' value='Seleted option' id='but_read'>

<br/>
<div id='result'></div>

3. jQuery

Initialize select2() on <select id='selUser'> and define click event on button to read the selected option text and value.
Display the values in <div id='result'>.

Completed Code

$(document).ready(function(){
 
  // Initialize select2
  $("#selUser").select2();

  // Read selected option
  $('#but_read').click(function(){
    var username = $('#selUser option:selected').text();
    var userid = $('#selUser').val();

    $('#result').html("id : " + userid + ", name : " + username);

  });
});

5. Conclusion

I hope this tutorial, helps you to create dropdown element with search box using select2 plugin.
You can also populate data in select2 dropdown with AJAX.
I already have written a tutorial on this which you can view it here.
If you found this tutorial helpful then don't forget to share.

Sometimes it requires to auto-populate data on the element based on the selection on another element e.g. City names based on a state.

You can do this with the only PHP but it required you to submit every time on selection.
This solves the problem but it is a little frustrating because it submits every time even if the selection is right or wrong.
For making it better you can use AJAX with jQuery that loads new data and remove the old one on each selection.
In the demonstration, I am creating a Department drop-down list and based on the option selection show all existing users of that department on another Dropdown.

1. Table structure

I am using 2 tables in the example –

department Table –

CREATE TABLE `department` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `depart_name` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

users Table –

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `department` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php to define database connection.

Completed Code

<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}?>

3. HTML

Creating two Dropdown elements one –

Fetch records from department table and use to add <option> in <select id='sel_depart'> and
Another dropdown shows the users names which are filled with jQuery based on the department name selection from the first dropdown element.

Completed Code

<?php 
include "config.php";
?>

<div>Departments </div>
       
<select id="sel_depart">
   <option value="0">- Select -</option>
   <?php 
   // Fetch Department
   $sql_department = "SELECT * FROM department";
   $department_data = mysqli_query($con,$sql_department);
   while($row = mysqli_fetch_assoc($department_data) ){
      $departid = $row['id'];
      $depart_name = $row['depart_name'];
      
      // Option
      echo "<option value='".$departid."' >".$depart_name."</option>";
   }
   ?>
</select>
<div class="clear"></div>

<div>Users </div>
<select id="sel_user">
   <option value="0">- Select -</option>
</select>

4. PHP

Create a new getUsers.php file.
Fetching users based on department selection from the users table.
Initialize $users_arr Array with userid and name.
Return $users_arr Array in JSON format.

Completed Code

include "config.php";

$departid = $_POST['depart'];   // department id

$sql = "SELECT id,name FROM users WHERE department=".$departid;

$result = mysqli_query($con,$sql);

$users_arr = array();

while( $row = mysqli_fetch_array($result) ){
    $userid = $row['id'];
    $name = $row['name'];

    $users_arr[] = array("id" => $userid, "name" => $name);
}

// encoding array to json format
echo json_encode($users_arr);

5. jQuery

Sending AJAX request when an option selected from the first drop-down. Pass the selected option value as data and on successfully callback fill <select id='sel_user'> with response.

Completed Code

$(document).ready(function(){

    $("#sel_depart").change(function(){
        var deptid = $(this).val();

        $.ajax({
            url: 'getUsers.php',
            type: 'post',
            data: {depart:deptid},
            dataType: 'json',
            success:function(response){

                var len = response.length;

                $("#sel_user").empty();
                for( var i = 0; i<len; i++){
                    var id = response[i]['id'];
                    var name = response[i]['name'];
                    
                    $("#sel_user").append("<option value='"+id+"'>"+name+"</option>");

                }
            }
        });
    });

});

6. Conclusion

In this tutorial, I used dropdown element for autofill you can do this with any other element like Textbox, Textarea, etc. that you can fill with information according to input on another element.

Subscribe to: Posts ( Atom )

PHP Tutorals for beginners step by step with advance topic example

Report Abuse

Tags

Search This Blog

Categories

Instagram

Advertisement

Tags

Like Us

Like us

Pages

Custom Random