Solved

Change text of current selected option on a DropDownCheckList element

Posted on 2014-01-21
4
678 Views
Last Modified: 2014-03-04
Hi.

I have a web application which uses DropDownCheckList element: http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

When user mark a checkbox, a prompt message appears asking for a numer.
How can I concatenate this number just after the text beside the just marked checkbox?

This is a snippet of my code:
		$("#proves").dropdownchecklist({
			onItemClick: function(checkbox, selector){
			var justChecked = checkbox.prop("checked");
				if (justChecked){
					num_autoritz_p = prompt("Número d'autorització:","");
					if (num_autoritz_p.length>0){
						codi_nou = checkbox.val();
						a_proves[codi_nou] = num_autoritz_p;
					}
					else
						checkbox.prop("checked",false);
				}
				else {
					codi_nou = checkbox.val();
					a_proves[codi_nou] = null;
					delete(a_proves[codi_nou]);
				}
	
			} // Fi function onItemClick
		}); // Fi definició dropdownchecklist

Open in new window


Thank you.
0
Comment
Question by:gplana
4 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39799162
Hi,

this should work:
$("#proves").dropdownchecklist({
			onItemClick: function(checkbox, selector){
			var justChecked = checkbox.prop("checked");
				if (justChecked){
					num_autoritz_p = prompt("Número d'autorització:","");
					if (num_autoritz_p.length>0){
						codi_nou = checkbox.val();
						a_proves[codi_nou] = num_autoritz_p;
                        oldText = $('#proves option[value="'+codi_nou+'"]').text();
                        newText =  oldText + "-" + num_autoritz_p;
                        $('#proves option[value="'+codi_nou+'"]').text(newText);
                        $('label[for="' +checkbox.prop("id") + '"]').text(newText);
					}
					else
						checkbox.prop("checked",false);
				}
				else {
					codi_nou = checkbox.val();
					a_proves[codi_nou] = null;
					delete(a_proves[codi_nou]);
				}
	
			} // Fi function onItemClick
		}); // Fi definició dropdownchecklist

Open in new window


Sample page:
http://jsfiddle.net/Rtvbx/

HTH
Rainer
0
 
LVL 15

Author Comment

by:gplana
ID: 39799331
Thank you. Yes, it works, however I have two problems:

1. Is it possible also to remove the num_autoritz_p when user un-mark the checkbox?

2. If user marks the checkbox with the most large text, then the added number goes out of the control: scrollbars appear and number appeared on the page background instead of on the control's background.

Thanks.
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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)

807 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