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

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="http://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.

 

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments