unselect an item from a select list

[david_va]

I allow users to select a salesman from a list. When they select the salesman, a javascript function is called that will gather informtion for that salesman. I want to "unselect" the salesman after I have gathered the information. How can you do that?

Here is the jsp code that allows users to select salesman:
<div id="selectSalesman">
<html:select name="user" property="user" styleId="salesmanBox" size="20" onchange="retrieveSalesman(this.form);">
<html:optionsCollection property="salesman" label="displayName" value="id"/>
</html:select>
</div>

Here is the code that reads the selected text:
function getSalesman() {
var box = document.getElementById("salesmanBox");
return box.options[box.selectedIndex].value;
}


Is there a way that I can "unselect" the selected item?

Thank you for any help!!

[Kravvitz]

Change the value of the selectedIndex property of the <select> or set the selected property of the selected <option> to false.

[david_va]

I have tried that, but have not been successful. I am new to working with the DOM and do not know exactly how to handle it. Here are some of the ways I have tried to do it:

1.
var box2 = document.getElementById("salesmanBox");
box2.options[box2.selectedIndex].value = false;

2
document.getElementById("salesmanBox").options[document.getElementById("salesmanBox")..selectedIndex].value = false;

3.
function unselectSalesman(thisForm) {
for (var i=0; i<thisForm.elements.length; i++) {
if (thisForm.elements[i].name.indexOf("user") > -1) {
thisForm.elements[i].name.indexOf("user").checked = false;
}
}

None of those worked. What am I doing wrong.

[Kravvitz]

It seems that you don't understand the difference between an element and a property. An element has properties/attributes. Properties have values. I didn't mean that you should change the value of the value property of an element.

I'm not sure what the third code block has to do with this.

P.S. Please read Guidelines and Suggestions for Posting on Web Development Forums (http://www.dynamicsitesolutions.com/other/forum_posting_guidelines/).

[david_va]

I am fairly new to javascript and DOM programming. I am trying to write a page that does not have to re-load itself every time a user selects a different salesman.

I have been trying to solve this for a couple of days. I do not know how and have not been able to find a way to change the select value of the selected item.

The third line of the third block is trying to change the value of the selected item. Does not work.

Thanks for your help, I will keep looking.

[Kravvitz]

Try this:
document.getElementById("salesmanBox").selectedIndex = -1;

[david_va]

That did it. Could you suggest a good book that explains how the DOM tree works.

Thank you!

[Kravvitz]

You're welcome :)

You could get JavaScript: The Definitive Guide, Fifth Edition (http://www.oreilly.com/catalog/jscript5/) but I would recommend starting with online references.

JavaScript tutorial - W3C DOM introduction (http://www.howtocreate.co.uk/tutorials/javascript/domintroduction)
http://www.quirksmode.org/dom/
http://www.quirksmode.org/js/dom.html
http://www.brainjar.com/
http://developer.apple.com/internet/webcontent/dom2i.html
http://developer.mozilla.org/en/docs/DOM:document
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
http://www.sitepoint.com/article/rough-guide-dom
http://digital-web.com/articles/forms_usability_and_the_w3c_dom/
http://www.w3.org/DOM/