Multiple Select DropDown List Tutorial in PHP and Jquery

Hi friends, today we will learn how to implement Multiple Select dropdown list tutorial in php and jquery. You will also learn 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:

STEP 1:

[code]
<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>
[/code]

STEP 2:

Now we will move on implementation of Multiple Select dropdown:

[code]
<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>
[/code]

STEP 3:

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

[code]
if(isset($_POST[‘state_id’])){
$state_id = implode(‘,’,$_POST[‘state_id’]);
}
[/code]

STEP 4:

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.

[code]
<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">
[/code]

STEP 5:

The jquery Implementation code given below:

[code]
$(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);
});
});
[/code]

STEP 6:

The CSS code.

[code]
.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: #2ac890;
border-color: #0a9266;
color: #ffffff;
letter-spacing: 1px;
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;
}
[/code]

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. PHP Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.