Multiple Select drop down list option in PHP, Mysql, Jquery

Abhigyan Singh 12th Jul 2020

In this tutorial we will learn about Multiple Select dropdown. This Multiple Selection list is very important in web development. As we know that dropdown box is the most powerful form element in web technology where we can select a single option within several option.

In drop down box we can fetch data from mysql table to show all the option and user can select a single option within it. But multiple select dropdown box enables the features to select multiple options within all option user can select all option also through multiple select drop down.

Here we will learn how to implement Multiple Select dropdown and how to get all the selected data of the form and save it into the database.

Multiple Select dropdown is same like Simple dropdown box. The HTML code of both is same except Multiple Select dropdown need to write “multiple="multiple"” in select option.

Here is the implementation code of simple dropdown box.

<select id="state_id" name="state_id" size="10" class="form-control" style="width:300px">
<option value="1">Andaman And Nicobar</option>
<option value="2">Andhra Pradesh</option>
<option value="3">Arunachal Pradesh</option>
<option value="4">Assam</option>
<option value="5">Bihar</option>
<option value="6">Chandigarh</option>
<option value="7">Chhattisgarh</option>
<option value="8">Dadra And Nagar</option>
<option value="9">Daman And Diu</option>
<option value="10">Delhi</option>
<option value="11">Goa</option>
<option value="12">Gujarat</option>
<option value="13">Haryana</option>
<option value="14">Himachal Pradesh</option>
<option value="15">Jammu And Kashmir</option>
<option value="16">Jharkhand</option>
<option value="17">Karnataka</option>
<option value="18">Kerala</option>
</select>

Now we will move on implementation of Multiple Select dropdown

<select id="state_id" name="state_id[]" multiple="multiple" size="10" class="form-control" style="width:300px">
<option value="1">Andaman And Nicobar</option>
<option value="2">Andhra Pradesh</option>
<option value="3">Arunachal Pradesh</option>
<option value="4">Assam</option>
<option value="5">Bihar</option>
<option value="6">Chandigarh</option>
<option value="7">Chhattisgarh</option>
<option value="8">Dadra And Nagar</option>
<option value="9">Daman And Diu</option>
<option value="10">Delhi</option>
<option value="11">Goa</option>
<option value="12">Gujarat</option>
<option value="13">Haryana</option>
<option value="14">Himachal Pradesh</option>
<option value="15">Jammu And Kashmir</option>
<option value="16">Jharkhand</option>
<option value="17">Karnataka</option>
<option value="18">Kerala</option>
</select>

In Multiple Select dropdown, we are getting value in list form, the value of this multiple select dropdown can be get by

if(isset($_POST['state_id']))
$state_id=implode(',',$_POST['state_id']);

Here we can just implode all the value of that list and save it into the variable that can be save into our table.

This is the button to select or deselect all the value of multiple select dropdown box.

<input type="button" id="select_all_state" class="btn btn-bricky" name="select_all_state" value="Select All State">
<input type="button" id="unselect_all_state" class="btn btn-bricky" name="unselect_all_state" value="Unselect All State">

The jquery Implementation code given below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

$(document).ready(function(){

$('#select_all_state').click(function() {
$('#state_id option').prop('selected', true);
});

$('#unselect_all_state').click(function() {
$('#state_id option').prop('selected', false);
});

});
</script>

Note:We should user use .prop() function in jquery version 1.9 or more. Blow this version, we should use .attr() function

The CSS code:

<style>
.btn {
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn-bricky {
background-color: #c83a2a;
border-color: #b33426;
color: #ffffff;
margin: 15px 0 0 5px;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
color: #fff;
margin: 15px 0 0 5px;
}

select.form-control {
background-color: #ffffff;
border: 1px solid #d5d5d5;
border-radius: 0;
color: #858585;
}

.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;

}

.cont_lft_side {
width: 450px;
}
.cont_lft_side h3 { border-bottom: 1px solid #ccc; color: #666;font: 17px arial;padding-bottom: 7px;}

</style>

That's all about Multiple Select dropdown list. If you have any query, suggestion about it, Fell free to write in comment section.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

ALSO ON DISCUSS DESK