Getting Multiple Values from a Select Tag

[Steve Dyke]

I need a list that the user can select multiple items in. How do I gather the values of the selected items?

[Bear Bibeault]

They'll be marked with the selected attribute.

[Eric Pascarello]

loop through and look for the selected attribute.

if you use jQuery, you can use :selected

Eric

[Bear Bibeault]

Eric Pascarello wrote:if you use jQuery, you can use :selected

Or simple the .val() method

[Steve Dyke]

Bear Bibeault wrote:They'll be marked with the selected attribute.

I am only getting the last value selected.

My JSP:

<SELECT class="small" size="5" name="tsonotelist" multiple="multiple">
					<c:forEach var="itemName" varStatus="status" items="${tsoNoteList}">
					<c:set var="ialValue" value="${fn:split(itemName, '~')}" />
						<option value="${ialValue[0]}">${ialValue[1]}</option>
					</c:forEach>
				</SELECT>

My JS:

function insertTsoNote(){
		var tnl = document.getElementById("tsonotelist");
		
		for(i=0;i<tnl.length;i++){
			if(tnl[i].selected == true){
				alert(tnl[i].value);
			}
		}
	
	}

[Bear Bibeault]

Please don't show JSP markup in the HTML forum. Rather, post the HTML generated from the JSP.

Check your script. Is it really inspecting the correct elements?

[Steve Dyke]

Bear Bibeault wrote:Please don't show JSP markup in the HTML forum. Rather, post the HTML generated from the JSP.

Check your script. Is it really inspecting the correct elements?

Can you look at this and tell me whats wrong? It still will not work.

function insertTsoNote(){
		var tnl = document.getElementById("tsonotelist");
		
		for(i=0;i<tnl.length;i++){
			if(tnl.elements[i].selected == true){
				alert(tnl.elements[i].value);
			}
		}
	
	}

>

[Tim McGuire]

the for statement is not getting elements.length

[Steve Dyke]

Tim McGuire wrote:the for statement is not getting elements.length

Have changed it to the following but still only get last value.

function insertTsoNote(){
		var tnl = document.getElementById("tsonotelist");
		
		for(i=0;i<tnl.length;i++){
			if(tnl.options[i].selected == true){
				alert(tnl.options[i].value);
			}
		}
	
	}

>

[Tim McGuire]

for(i=0;i<tnl.elements.length;i++){  

[Tim McGuire]

I mean

for(i=0;i<tnl.options.length;i++){ 

[Bear Bibeault]

Have you run the script in Firefox with Firebug enabled?

Some basic debugging will show that your script fails immediately.

[Steve Dyke]

Bear Bibeault wrote:Have you run the script in Firefox with Firebug enabled?

Some basic debugging will show that your script fails immediately.

I was under the impression that I could just click each item I wanted in my multiple select. I did not realize that the selecting process reqiured the CTRL button to be included to genererate the selection list.

[Bear Bibeault]

Beyond that, your script has some major problems. Are you only testing in IE?

[Steve Dyke]

Bear Bibeault wrote:Beyond that, your script has some major problems. Are you only testing in IE?

Yes, only in IE because it's the only browser we use. This is an intranet app developed using Websphere. I usually get an error indication when JS is wrong but I am getting no page error on this issuse.

Can you tell me what is wrong?

[Bear Bibeault]

Answer this question: how can you use getElementById() to find elements that have no id?!

[Eric Pascarello]

I love when we only develop for IE, nothing like shooting yourself in the foot for the future. That is why we are in this IE only mess!

document.getElementById("tsonotelist");


get Element By Id, you have no id.

Eric

[Steve Dyke]

Bear Bibeault wrote:Answer this question: how can you use getElementById() to find elements that have no id?!

Thats a good question. However, I have hundreds of these bogus lines of code that seem to do what I expect them to do. Are these not supposed to work in IE or IE only?

[Bear Bibeault]

The problem is that IE has these weird ideas of how things should work that doesn't match the standards that all other browsers use.

This is one case: getElementById() will match an element by its name. That's non-standard behavior and will not work in any other browser. Name and id are distinct and separate concepts.

[Steve Dyke]

Bear Bibeault wrote:The problem is that IE has these weird ideas of how things should work that doesn't match the standards that all other browsers use.

This is one case: getElementById() will match an element by its name. That's non-standard behavior and will not work in any other browser. Name and id are distinct and separate concepts.

Thanks for helping me as grope in the darkness. I am really tring to learn and attempt to be a good programer.
I try to take your suggestions and apply them.

So the fix on my part is make sure my HTML elements all have id attributes, right.

[Bear Bibeault]

Yes, if you are going to use id to reference elements, make sure that you use the id and not the name.