jQuery Multiple Selection

  • February 8, 2017
  • Posted by: Bharat Patel
  • Category: Uncategorized
No Comments

Today, I am very glad to announce finally I have made jQuery multi selection plug-in. I am really thankful to my one of friend who gives me such a nice idea and also thanks to Mr. Pritesh Patel who provides guideline to do better.

Now, in your mind one question arise. What is jQuery multi selection plug-in? jQuery multi selection plug-in is such a very useful plug-in and simple to use.

Features of jQuery Multi Selection Plug-in:

  • It’s fully ajax base.
  • Dynamically load all data.
  • No need to refresh page.
  • You can edit data once selection.
  • Pre-populate selection in edit mode.
  • Preview and edit selection once selection.

 

Documentation
 

Options Required * How to Use
Level Yes Specify level in number.
How many steps you want to go for selection.
Urlpath Yes Pass file path according to level.
Ex: {‘DATA’:[‘filepath1′,’filepath2′,’filepath3’]}.
You need to just pass file path which returns query data in JSON format.
Ex : {"COLUMNS":["COLUMN1","COLUMN1"],"DATA":[[VALUE1,"VALUE1"],[VALUE2,”VALUE2”]]}
Title Yes Pass title according to level.
Ex: {‘DATA’:[‘title1′,’title2′,’title3’]}.
If you don’t want to insert title, just leave blank
{‘DATA’:[”,’Title2′,”]}.
Maxselection No Maxselection options is used for validate data on each level.
If you want to validate data of any one level then leave other blank.
Ex: {‘DATA’:[2,3,]} In Level 1 you can select only 2 option and so on.
valueField Yes Yes You have to pass value field name which are used for posting data.
Ex: {‘DATA’:[‘id1′,’id2′,’id3’]} to store selected data on each level.
Render Yes Yes Just pass div id name where you want to render data.
Editable No Default : 1
If you do not want to pre-selection data accordingly values then just pass 0.

 

How to use

Step 1 : Put jQuery, jQuery.jMultiSelect.js and css in your page.
Step 2 : Bind jMultiSelect with your element on jQuery on load.

[code:js]
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery.jMultiSelect.js"></script>
<link rel="stylesheet" rev="stylesheet" href="css/jQuery.jMultiSelect.css" />

<script type="text/javascript">
jQuery(function(){
jQuery(‘#data’).jMultiSelect({
level : 3,
urlpath : {‘DATA’:[‘PATH1′,’PATH2′,’PATH3’]},
title : {‘DATA’:[‘title1′,’title1′,’title1’]},
maxselection : {‘DATA’:[2,2,2]},
valueField : {‘DATA’:[‘ID1′,’ID2′,’ID3’]},
render : ‘dataInfo’
});
});
</script>
[/code]

Step 3 : Make a div to render data in it.

[code:html]
<input type="hidden" name="ID1" value="" />
<input type="hidden" name="ID2" value="" />
<input type="hidden" name="ID2" value="" />
<br />
<a id="data" href="#">Click To Load Data</a>
<div id="dataInfo" />
[/code]

Step 4 : Run your page in browser.

Download Demo

Note : You can get value by url in each level as name "VALUE". You can play with "VALUE" variable in your database query. and one more thing you have to use minimum two field in each level database query. first one for id value and other for label.

Source Code By iSummation Technologies Pvt. Ltd is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.