Avatar of lulu50
lulu50
Flag for United States of America asked on

select all values from dropdown list

HI,

I want to be able to loop thru my dropdown list and send all values as a list.


Thanks,
Lulu

<select name="SelectDepartmentImpacted" class="SearchBySelect5" id="SelectDepartmentImpacted" style="width: 250px; height: 100px; background-color: rgb(248, 250, 252);" size="180" multiple="" sizzle-1400165879525="[object Object]">

<OPTION value=4 data-DepartmentName="BCN – Commons Customer Service">BCN – Commons Customer Service</OPTION>
<OPTION value=3 data-DepartmentName="BCN">BCN</OPTION>
<OPTION value=7 data-DepartmentName="Customer Service">Customer Service</OPTION>
</select>



		function ResetDepartment ()
	{
		var ResetDept = 'Clear Department';
		var dropdown = $("#DispDepartmentBox");	
			
		var SelDept = $("#SelectDepartmentImpacted option");
		var listDept = "";
		
	$.each(SelDept, function(index, value) {
		if ($('#SelDept').length > 0) 
		{
			//I want to have a list of all my value so I can send it to the URL
			listDept = ? //I want all the list value from the dropdown list like this listDept = (4,3,2,5)
			
			}
	});
		
		
		$('#TxtDepartment').val('');
		
		$.get( "getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent(ResetDept), function (data) {
			dropdown.html( data );
		});
	}	

Open in new window

jQueryJavaScriptJScript

Avatar of undefined
Last Comment
Md Shah

8/22/2022 - Mon
Md Shah

Try as below...

function ResetDepartment() {
    var ResetDept = 'Clear Department';
    var dropdown = $("#DispDepartmentBox");

    var SelDept = $("#SelectDepartmentImpacted option");
    var listDept = [];

    $.each(SelDept, function (index, value) {
        if ($('#SelectDepartmentImpacted').length > 0) {
            //I want to have a list of all my value so I can send it to the URL
            listDept.push($(value).val()); //I want all the list value from the dropdown list like this listDept = (4,3,2,5)

        }
    });

    var output = JSON.stringify(listDept);

    $('#TxtDepartment').val('');

    $.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(output) + "filter=" + encodeURIComponent(ResetDept), function (data) {
        dropdown.html(data);
    });
}

Open in new window

Play here - http://jsfiddle.net/mdshahbrains/7rdY7/1/

Hope that helps :)

Shah
ASKER CERTIFIED SOLUTION
Md Shah

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
lulu50

ASKER
My Keyup event is not working

am I missing something?


$("#TxtDepartment").keyup(function(evt) {
		
	 	var SelDept = $("#SelectDepartmentImpacted option");
    	var listDept = '(';

    	$.each(SelDept, function (index, value) {
        if ($('#SelectDepartmentImpacted').length > 0) {
            listDept += $(value).val() + ',' ; 
        }
    	});
    
    	listDept = listDept.substring(0,listDept.length-1) + ')';

	//URL encoded  encodeURIComponent(myUrl)
		  $.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent($(this).val()), function (data) {
        dropdown.html(data);
    });
	
	});
	

Open in new window

lulu50

ASKER
This function works fine but my key event is not working

function ResetDepartment ()
	{
		
		var ResetDept = 'Clear Department';
    var dropdown = $("#DispDepartmentBox");

    var SelDept = $("#SelectDepartmentImpacted option");
    var listDept = '(';

    $.each(SelDept, function (index, value) {
        if ($('#SelectDepartmentImpacted').length > 0) {
            
            listDept += $(value).val() + ',' ; 
        }
    });
    
    listDept = listDept.substring(0,listDept.length-1) + ')';

    alert(listDept);


    $('#TxtDepartment').val('');

    $.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent(ResetDept), function (data) {
        dropdown.html(data);
    });
		
		
		
	}	

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Md Shah

My Keyup event is not working

am I missing something?

What do you mean by this? In your question you have provided as JS function.

1) Are you getting any JS error? If so, what it says?
2) Is the control going inside keyup event function, can you keep alert inside like this & check if it is being fired?
$("#TxtDepartment").keyup(function(evt) {
    
    alert('Inside kepup event');

    // you remaining code
    ...
});

Open in new window


Cheers,
Shah Md
lulu50

ASKER
Md Shah,

Sorry, if I confused you.

I have the function which works fine and I also have a keyup event.

when the user enter something in a textbox it should filter their entry.

I did put an alert for testing. I do see my alert.
lulu50

ASKER
I am not getting any error but it's not filtering anything.

Let me do some more debugging .

the keyup event should do the same thing as the function.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Md Shah

Its okay. I am also trying to understand your issue here..

So the question related stuff has been answered.. This is a bit new issue ahead of it..

Ok lets see what I can help you on this then..

As an initial start.. Replace your keyup event with below code:
$("#TxtDepartment").keyup(function(evt) {

	alert('1. Key up Event fired');		
	var SelDept = $("#SelectDepartmentImpacted option");
    	var listDept = '(';

    	$.each(SelDept, function (index, value) {
	        if ($('#SelectDepartmentImpacted').length > 0) {
        	    listDept += $(value).val() + ',' ; 
	        }
    	});
    
    	listDept = listDept.substring(0,listDept.length-1) + ')';
	
	alert('2. Dropdown List Values : ' + listDept);		
	alert('3. Text Entered, Filter : ' + $(this).val());		

	//URL encoded  encodeURIComponent(myUrl)
	$.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent($(this).val()), function (data) {

		alert('4. GET function on success : ' + data);		
	       dropdown.html(data);
	});	
});

Open in new window

I have kept 4 ALERTS in the code, now run & let me know what you can see when you enter filter value in TxtDepartment
Md Shah

You there..????

Have you tried as said above, whats the output ?

Its already late.. I will be going to sleep shortly..

Let me know if you require any help.

Shah
lulu50

ASKER
I think the problem is with this (encodeURIComponent)  

Can I do that to a list?

<cfset UlistDept = urlDecode(URL.listDept, "utf-8")> 


$.get( "getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "&filter=" + encodeURIComponent($(this).val()), function (data) {
			dropdown.html( data );

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
lulu50

ASKER
Md Shah,

we can do it tomorrow, if you are tired and need to go to bed.

but, don't forget about me tomorrow, I need to get working.

so, I need your help.

Good night,
Lulu
Md Shah

What happened to above alert code I have given in my earlier post.

Are you not getting alert inside function(data) {

As you say if (encodeURIComponent) is the problem then how come it has worked earlier to keyup event when its just a JS function. So problem might be something else.
Md Shah

Try to perform $.get without encodeURIComponent, something like below and see if it works:
$.get( "getDepartmentName.cfm?listDept=" + listDept + "&filter=" + $(this).val(), function (data) {
			dropdown.html( data );

Open in new window

Let me know what this results in ???

Shah
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Md Shah

Also try to post the structure of calling steps where you are fetching values (listDept,filter) from query string in getDepartmentName.cfm file as there can be a issue at that location too. Debug and check what values is being received.

Shah
lulu50

ASKER
Md Shah,

I am debugging the issue now.  

please, don't go anywhere.
lulu50

ASKER
Md Shah,

I am all good now!!!!!!!!!

I got it to work!!!!!!!!

Thank you so much for all your help.

Could not have done it without you.

Thank you again.

Lulu
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
lulu50

ASKER
Thank you
Md Shah

Happy That I have been useful..

Good Luck for further coding :)