• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 996
  • Last Modified:

ColdFusion dropdown multiple select question

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
DJPr0
Asked:
DJPr0
2 Solutions
 
dgrafxCommented:
use a jquery plugin
here is a demo: http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

good luck
0
 
leakim971PluritechnicianCommented:
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
 
DJPr0Author Commented:
Thanks!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now