Solved

ColdFusion dropdown multiple select question

Posted on 2014-01-17
3
584 Views
Last Modified: 2014-01-22
When I use the "multiple" option in my cfselect tag in turns my drop down to a list box.

Can I create a regular drop down with little check boxes with ColdFusion?

Please view demo.png.

If not, what technology/software is needed?
demo.png
0
Comment
Question by:DJPr0
3 Comments
 
LVL 24

Accepted Solution

by:
dgrafx earned 250 total points
Comment Utility
use a jquery plugin
here is a demo: http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

good luck
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
Comment Utility
Test page : http://jsfiddle.net/K9fDM/

<div id="dropdown1" class="dropdown-container">
	<div class="dropdown_selected"><a href="javascript:void(0)">Choose an option</a></div>
	<div class="dropdown_options">
		<ul>
			<cfloop index="ListElement" list = "John,Paul,George,Ringo"> 
				<cfoutput><li><cfinput type="checkbox" id="cb_#ListElement#" value="#ListElement#" /><label for="cb_#ListElement#">#ListElement#</label></li></cfoutput>
			</cfloop>
		</ul>
	</div>
</div>

Open in new window


CSS (do your own design) :
.dropdown_options {
    display:none;
}
.dropdown_selected a {
    text-decoration: none;
}
.dropdown_options ul {
    width: 108px;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    margin-top: 5px;
}
.dropdown_options li {
    list-style:none;
    margin-left:-32px;    
}

Open in new window


jQuery code :
    jQuery(function($) {
       $(".dropdown_selected").click(function() {
           var options = $(this).next(".dropdown_options");
           options.toggle();
       });
       $(".dropdown_options :checkbox").change(function() {
           var $selected_checkbox = $(this).closest("ul").find(":checkbox:checked");
           var selected_option = [];
           $selected_checkbox.each(function(i, v) {
               var checkbox_value = $(this).val();
               selected_option.push(checkbox_value);
           });
           var $dropdown_selected =  $(this).closest(".dropdown_container").find(".dropdown_selected");
           var list_separator = ",";
           $dropdown_selected.text(selected_option.join(list_separator)||"Choose an option");
       });
       $(document).click(function(evt) {
           var isNotClickInsideDropdown = $(evt.target).closest(".dropdown_container").length==0;
           var isNotClickOnDropdown = !$(evt.target).hasClass(".dropdown_container");
           if(isNotClickInsideDropdown && isNotClickOnDropdown)  {
               $(".dropdown_options:visible").hide();
           }
       });
    });

Open in new window

0
 

Author Closing Comment

by:DJPr0
Comment Utility
Thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now