Setting select option highlighted javascript

quinnd6 · 21-11-2007 5:21pm #1

Ok Im using javascript in a jsp and this is mainly a javascript question.

The page Ive written uses a form and should allow someone to selected an option from the options box and then the page should reload with that value selected.
Unfortunately when the page reloads the option that I want is not highlighted and instead the selected option is the default option.

At the moment Im just trying to get the page to load up with the 11th option selected(not sure how to get the page to load with the last selected option).

Heres some code so you might know what Im doing wrong.

[code]

<script type="text/javascript">
function changeOOOUser(username)
{
document.oooForm.currentOOOUser.value= username ;
document.oooForm.submit();

}

function setListbox()
{
document.oooForm.oooUserList.options[11].selected=true ;

}

function defaultUser()
{

document.getElementById(currentOOOUser.value).selected = true;
}

</script>

<body onload="setListBox()">

<form name= "oooForm" action="<%=encodedBaseURL%>" method="get" onload="setListBox()" >

<input type="text" name="currentOOOUser" >
<h5>Select User</h5>

<select name="oooUserList" size="200" id="ooouserpick" onload="setListBox()" onchange= 'changeOOOUser(document.oooForm.oooUserList.options[document.oooForm.oooUserList.selectedIndex].value);setListbox();' ">
<option>Please Select A User </option>
<%
Iterator iter = OOOUsers.iterator();

while(iter.hasNext()) {
String t=(String)iter.next();
%><option value="<%=t%>"><%=t%></option><%
}
%>
</select>

</body>

Evil Phil · 21-11-2007 6:00pm

I don't know jsp but if it were asp.net I would say that when you're submitting the form the codeblock that runs through the iterator creating your options is executing. Is there anyway to check if the form is being submitted? Like an IsPostBack property or something? Of course I could be way off track here.

Eoin · 21-11-2007 6:05pm

Does a select element have an "onload" event?

You can do this on the server-side quite easily I should think. If it's definitely the 11th element you want, then just use a counter in your array, and check if the counter is 11. If it is, then just print selected="selected" into the option box.

This is just pseudo code, but you should be able to adapt it:

<&#37;
int i = 0;
while(iter.hasNext()) {
	i++;
	String t=(String)iter.next();
	%>
		<option value="<%=t%>" <% (if i == 11) {Response.Write("selected='selected'");}" %>>
		<%=t%>
		</option>
	<%
}
%>

You should check that the form has not already been submitted - in that case, you should automatically select the value the user did instead.

quinnd6 · 22-11-2007 4:37pm

I have managed to get the selected name from the option box into a java string variable.

So now I need to get the selected index of the options box to point to this string.
So how could I go about doing that?

hussey · 24-11-2007 12:36am

you are always reseting the selected index?
onchange= 'changeOOOUser(document.oooForm.oooUserList.options[document.oooForm.oooUserList.selectedIndex].value);
setListbox();'

so setListBox is always set back is this correct?

but you are making your code over complex, if you pass back the parameter that you got back to the jsp (call it selectedUser) in jstl it should look like

(assuming OOOUsers is a list or an array of some sort)

<select name="oooUserList" size="200" id="ooouserpick" >
<option>Please Select A User </option>
<c:forEach var="option" items="${OOOUsers}"> 
    <option value="<c:out value="${option}"/> <c:if test="${option == selectedUser}">selected</c:if> ><c:out value="${option}"/></option>
</c:forEach>

Eoin · 24-11-2007 1:01am

hussey wrote: »
you are always reseting the selected index?
onchange= 'changeOOOUser(document.oooForm.oooUserList.options[document.oooForm.oooUserList.selectedIndex].value);
setListbox();'

so setListBox is always set back is this correct?

but you are making your code over complex, if you pass back the parameter that you got back to the jsp (call it selectedUser) in jstl it should look like

(assuming OOOUsers is a list or an array of some sort)
<select name="oooUserList" size="200" id="ooouserpick" >
<option>Please Select A User </option>
<c:forEach var="option" items="${OOOUsers}"> 
    <option value="<c:out value="${option}"/> <c:if test="${option == selectedUser}">selected</c:if> ><c:out value="${option}"/></option>
</c:forEach>

I already suggested doing it server side, but the lack of response probably means that the OP needs to do it client side.

Bluefrog · 24-11-2007 12:16pm

Can't see any reason why you need to do this client side.

However, in the document.onLoad event it is possible to fire a function to iterate through the options array of the particular select element and mark the desired one as selected based on it's value.

for information on this take a look at the forms section of the javascript faq at http://www.irt.org. This is a pretty common requirement so you are going to need to learn and understand how to do it at some point - may as well be now.

quinnd6 · 26-11-2007 3:33pm

Sorry I didn't reply earlier .
I managed to get that sorted by changing the onchange and the javascript to point to .text instead of .value.

Setting select option highlighted javascript

Comments