We Keep Coding

Is it possible to focus on textarea after selecting option?

After adding text inside textarea i would like to focus caret just after this input. Unfortunately I can't make function focus() to be called. Although when I use focus() on click it works perfectly
Here is my function:
function append_textarea(textarea, select, div_for_select) {
$(textarea).on('keyup paste cut mouseup', function (event) {
var contentHeight = $(this).textareaHelper('height');
$(this).height(contentHeight);
var obj = $(this).textareaHelper('caretPos');
var left = obj.left + 15;
var top = obj.top + 50;
if (event.which === 219) {
$(div_for_select).attr('style', 'top: ' + top + 'px;' + ' left: ' + left + 'px;').fadeIn();
openDropdown(select);
} else if (event.which === 221) {
$(div_for_select).fadeOut('slow');
}
});
$(div_for_select).on('keydown click', function (event) {
if (event.which === 13 || event.which === 1) {
var $txt = $(textarea);
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $(select).val();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos)).focus();
$(this).fadeOut('slow');
}
});
$(textarea).keyup();
function openDropdown(elementId) {
function down() {
var pos = $(this).offset(); // remember position
var len = $(this).find("option").length;
if (len > 20) {
len = 20;
}
$(this).css("position", "absolute");
$(this).css("zIndex", 9999);
$(this).offset(pos); // reset position
$(this).attr("size", len); // open dropdown
$(this).unbind("focus", down);
$(this).trigger('focus');
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
$(this).trigger('focus')
}
$(elementId).focus(down).blur(up).focus();
}
}
append_textarea('#example', '#select', '.tail');
$('#select').on('click', function () {
$('#example').focus();
});
$('#click').on('click', function () {
$('#example').focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.tail {
position: absolute;
}
textarea {
min-width: 250px;
min-height: 100px;
}
</style>
<!-- #MAIN PANEL -->
<div id="main" role="main">
<!-- RIBBON -->
<div id="ribbon">
<!-- breadcrumb -->
<ol class="breadcrumb">
<li>Home</li>
</ol>
</div>
<!-- col -->
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
<h1 class="page-title txt-color-blueDark"></h1>
<div class="clearfix"></div>
<textarea id="example"></textarea>
<div class="tail" hidden>
<select id="select">
<option style="display: none;">Please select one</option>
<option value="USER_NAME}">First and Last Name</option>
<option value="WO_NO}">Work Order Number</option>
<option value="PROD}">Product Name and Size</option>
<option value="PROJECT}">Project Name</option>
<option value="MACHINE}">Machine Name</option>
</select>
</div>
<div>
<input type="button" value="CLICK ME!" id="click">
</div>
</div>
</div>
<script src="https://rawgit.com/Codecademy/textarea-helper/master/textarea-helper.js"></script>

am trying to retain div on page exit

I am trying to retain div on exiting a page and am not very sure how to go about this, I am aware that I can achieve this using localStorage but cannot figure out how, here is the script
<script type="text/javascript">
function ShowHideDiv() {
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
var ddlPassport = document.getElementById("ddlPassport");
var dvPassports = document.getElementById("dvPassports");
dvPassports.style.display = ddlPassport.value == "N" ? "block" : "none";
}
</script>
<span>Do you have Passport?</span>
<select id = "ddlPassport" onchange = "ShowHideDiv()">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<!--<hr />-->
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
<div id="dvPassports" style="display: none">
Other Number:
<input type="text" id="txtPassportNumbers" />
</div>
thank you very much for your help!

In the beforeunload of the window object, set whatever you like into localStorage.
Also, it's better to use CSS classes than to apply individual style properties.
window.addEventListener("DOMContentLoaded", function(){
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
var dvPassports = document.getElementById("dvPassports");
var passNum = document.getElementById("txtPassportNumber");
var passNums = document.getElementById("txtPassportNubmers");
ddlPassport.addEventListener("change", ShowHideDiv);
// Restore prior saved data:
if(localStorage.getItem("passportNumber")){
passNum.value = localStorage.getItem("passportNumber");
ShowHideDiv();
} else if(localStorage.getItem("passportNumbers")) {
passNums.value = localStorage.getItem("passportNumbers");
ShowHideDiv();
}
var numElement = null;
function ShowHideDiv() {
if(this.value === "y"){
dvPassport.classList.remove("hidden");
dvPassports.classList.add("hidden");
numElement = dvPassport;
} else if(this.value === "n") {
dvPassport.classList.add("hidden");
dvPassports.classList.remove("hidden");
numElement = dvPassports;
} else {
dvPassport.classList.add("hidden");
dvPassports.classList.add("hidden");
}
}
// As the user is leaving the page, store the text value:
window.addEventListener("beforeunload", function(){
if(numElement === dvPassport){
localStorage.setItem("passportNumber", passNum.value);
} else if(numElement === dvPassports) {
localStorage.setItem("passportNumbers", passNums.value);
}
});
});
.hidden { display:none; }
<span>Do you have Passport?</span>
<select id = "ddlPassport">
<option value="">--- Select ---</option>
<option value="n">No</option>
<option value="y">Yes</option>
</select>
<div id="dvPassport" class="hidden">
Passport Number:
<input type="text" id="txtPassportNumber">
</div>
<div id="dvPassports" class="hidden">
Other Number:
<input type="text" id="txtPassportNumbers">
</div>

need help in javascript to increase the output size

I am new to JavaScript. I have made a form and taken textarea and button and displayed the text of the textarea in a div tag and have taken 2 buttons.
Now I want on click of first button the size of output in div tag increase and similarly on click of second button it becomes bold and so on ...
<html>
<body>
<form name="myform" onsubmit="return fuc1()">
<table>
<tr><td>Description</td><td> <textarea name="message1" id="message" rows="10" cols="30" font-size:"100px";></textarea><br/></td></tr>
<tr><td><button onclick=fincrease() type="button" name="sizeinc" id="sizeinc" >Increase SIZE</button></td>
<td><button type="button" name="sizedec" id="sizedec" >Decrease SIZE</button></td></tr>
<tr><td><button type="button" onclick="fbold()" name="bold" id="bold" >BOLD</button></td>
<td><button type="button" name="italic" id="italic" >ITALIC</button></td>
<td><button type="button" name="underline" id="underline" >UNDERLINE</button></td></tr>
<tr><td><select id="colors" onclick="fcolor()">
<option value="Default">(Please select color)</option>
<option value="pink">PINK</option>
<option value="yellow">YELLOW</option>
<option value="green">GREEN</option>
<option value="orange">ORANGE</option>
</select>
</td>
<td><select id="borders" onclick="fborder()">
<option value="Default">(Please select border)</option>
<option value="dashed">DOTTED</option>
<option value="thick solid">Thick Solid</option>
<option value="solid">Solid</option>
</select></td>
</tr>
<tr><td><input type="submit"/></td></tr>
</table>
<div id="div1">OUTPUT</div>
</form>
<script type="text/javascript">
function fuc1()
{
var tex=document.getElementById("message").value;
var colr=document.getElementById("colors").value;
var bord=document.getElementById("borders").value;
var increase=document.getElementById("sizeinc").value;
var decrease=document.getElementById("sizedec").value;
var italic1=document.getElementById("italic").value;
var bold1=document.getElementById("bold").value;
var under=document.getElementById("underline").value;
html=tex;
document.getElementById("div1").innerHTML=html;
return false;
}
function fcolor(){
var c=document.getElementById("colors").value;
if(c=="pink")
{
document.getElementById("div1").style.color= c;
}
if(c=="yellow")
{
document.getElementById("div1").style.color= c;
}
if(c=="green")
{
document.getElementById("div1").style.color= c;
}
if(c=="orange")
{
document.getElementById("div1").style.color= c;
}
}
function fborder(){
var b=document.getElementById("borders").value;
if(b=="dashed")
{
document.getElementById("div1").style.border=b;
}
if(b=="thick solid")
{
document.getElementById("div1").style.border=b;
}
if(b=="solid")
{
document.getElementById("div1").style.border=b;
}
}
function fbold()
{
}
</script>

Remember to add them to the onclick events of your buttons
function fbold()
{
if (document.getElementById("div1").style.fontWeight == "bold")
{
document.getElementById("div1").style.fontWeight = "normal"
}
else
{
document.getElementById("div1").style.fontWeight = "bold";
}
}
function fItalic() {
if (document.getElementById("div1").style.fontStyle == "italic") {
document.getElementById("div1").style.fontStyle = "normal"
}
else {
document.getElementById("div1").style.fontStyle = "italic";
}
}
function fUnderline()
{
if (document.getElementById("div1").style.textDecorationUnderline) {
document.getElementById("div1").style.textDecorationUnderline = false
}
else {
document.getElementById("div1").style.textDecorationUnderline = true;
}
}
function fincrease()
{
if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "")
{
document.getElementById("div1").style.fontSize = "14px"
}
document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) + 1) + "px"
}
function fdecrease() {
if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "") {
document.getElementById("div1").style.fontSize = "14px"
}
document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) - 1) + "px"
}

General tip: add some console.log("...") messages to your functions and open your page in a browser that has a console (e.g. in Google Chrome, press F12). That will enable you to see when a function is called while you test it.
More specific tip: on the select lists, replace onclick with onchange.

search by category with javascript

So I've been working on and off on a search function for awhile Tim Down helped me a lot and gave me a simple code to search the page for certain text.
Now I'm trying to edit the code to search by category. I've got the HTML table divided into divs as follows.
<form id="f1" name="f1" action="javascript:void(0)" onsubmit="searchpage()" >
<input id="t1" type="text" name="t1" />
<select name="category" id="category">
<option>all</option>
<option value="name">Title</option>
<option value="author">Author</option>
<option value="year">Year</option>
<option value="publisher">Publisher</option>
</select>
<input id="button" type="submit" value="SEARCH" name="b1" onclick="searchpage()" />
</form>
<tr>
<td>
<div id="name">
<div id="title">
title 1
</div>
extra content
</div>
</td>
<td>
<div id="author">
author 1
</div>
</td>
<td>
<div id="year">
2000
</div>
</td>
<td>
<div id="publisher">
publisher 1
</div>
</td>
<td>
<div id="notes">
notes 1
</div>
</td>
</tr>
<!--etc...-->
My Javascript is as follows
/*these two variables select the value attribute of each option in the dropbox*/
var cat=document.getElementById("category").selectedIndex;
var catid=document.getElementsByTagName("option")[cat].value;
function doSearch(text) {
var sel;
if (window.find && window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
sel.collapseToEnd();
}
window.find(text);
} else if (document.selection && document.body.createTextRange) {
sel = document.body.selection;
var textRange;
if (sel.type == "Text") {
textRange = sel.createRange();
textRange.collapse(false);
} else {
textRange = document.body.createTextRange();
textRange.collapse(true);
}
if (textRange.findText(text)) {
textRange.select();
}
}
}
function searchpage() {
doSearch(document.getElementById("t1").value);
}
As you can see, the value attributes match up with the ids in the divs. I'd like to make the javascript search only specific divs when the corresponding option is selected. Not sure how to go about it from here.
Can I use the "in" property to define that I want to search in a certain class or id?
something along the lines of
doSearch(document.getElementById("t1").value in document.getElementsByClassName("name"));}

The HTML pretty much stayed the same except I used classes instead of ids.
JAVASCRIPT
function doSearch(text) {
var catclass = document.getElementById("category").options;
var sel;
var classname;
var catselect;
if (window.find && window.getSelection) {
sel = window.getSelection();
window.find(text);
var classname = sel.anchorNode.parentElement.className;
var catselect = catclass[document.getElementById("category").selectedIndex].text;
while (classname !== catselect) {
if (sel.rangeCount > 0) {
if (sel.anchorNode.parentElement.className == catclass[document.getElementById("category").selectedIndex].text) {
break;
}
else {
doSearch(text);
}
}
}
}

How to get a Select/Options List if I don't have a Form in the DOM

Got the following chunk of Html...
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
The page/content for the select is generated by javascript functions/calls...
I can fetch the page, so I get a HtmlPage instance.
I can't figure out how to fetch the select/options, given that I don't
have a "form" element in the DOM. Pointers to chnuks of code that
handle this would be appreciated.
The actual Html is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>College Textbooks: College Apparel, College Gifts & Used College Books: eFollett.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="From used college books to up-to-date college textbooks and great college gifts like your school?s latest college apparel and more, visit efollett.com."/>
<meta name="keywords" content="college textbooks, used college books, college apparel, college gifts"/>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/prototype-1.5.0.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/Util.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/flPrototypeHelper.js"></script>
<link rel="stylesheet" href="/wcsstore/HostedStoreFrontAssetStore/css/style1.css" type="text/css" />
</head>
<body onload="accessibleSelect();" id="global">
<!-- BEGIN COREMETRICS SUPPORT -->
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/eluminate.js" type="text/javascript"></script>
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/cmdatatagutils_WC.js" type="text/javascript"></script>
<script language="javascript1.2" type="text/javascript">
//<![CDATA[
cmSetProduction();
var cm_ClientID="90227440";
cmCreatePageviewTag("efollett Home Page","10051_HOME",null,null,"10051");
//]]>
</script>
<!-- END COREMETRICS -->
<div id="wrap">
<!-- start header -->
<table width="900" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="skip_to_content" align="left" valign="top">
<ul>
<li>Skip to Content</li>
</ul>
</td>
<td align="right" valign="top" id="your_account">
<ul>
<li> <strong>Serving Colleges and Universities</strong> | Online and On Campus</li>
<li> | Your Account</li>
<li> | Shopping Cart<span class="cart_total">: 0</span> | </li>
<li>Subtotal:<span class="subtotal"> $0.00</span> </li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/411.gif" alt="efollett.com. Online. On Campus." width="272" height="168" border="0" />
<img src="http://images.efollett.com/htmlroot/images/templates/storeBanners/411.jpg" alt="" width="624" height="168" border="0" /></td>
</tr>
<tr>
<td id="top_nav">
<h2 class="invisible">Site Menu</h2>
<ul>
<li>Home</li>
<li>
| Special Offers
</li>
<li> | Contact Us</li>
<li> |Cash For Books</li>
</ul></td>
<tr>
</table>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- START CONTENT -->
<td align="left" valign="top"><!--intro table-->
<table border="0" cellspacing="5" cellpadding="0" width="899">
<tr>
<td align="left" valign="top" width="203"><img src="http://images.efollett.com/htmlroot/images/templates/endeca/global/global_merch.jpg" alt="" width="203" height="140" /></td>
<td align="left" valign="top"><h1 class="secondaryPageHeaderHomepage"><a name="content" id="thecontent"></a>
Welcome to the efollett.com network of online bookstores!</h1>
<p> efollett.com provides you with access to over 1,200 online bookstores across the United States and Canada so you can quickly locate your campus store. </p><p> Order your college textbooks, used college books and merchandise by shopping your bookstore's online website. Each bookstore selects the college apparel and other products from their store inventory and fulfills the order, so you are actually shopping at your local bookstore. We do it this way because your campus bookstore is the best source for textbooks, college gifts and merchandise specific to your campus. </p><p><strong>Please locate your college, university or school from our drop down menus below</strong></p></td>
</tr>
</table>
<div id="storefinder">
<table cellpadding="0" cellspacing="6">
<tr style="border: none;">
<td style="border: none;">
<div id="errorDiv" style="display:none;visibility:hidden;color:red;" class="text"> </div>
</td>
</tr>
<tr>
<td align="left" valign="top">
<!-- <img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/us_university." width="290" border="0" /> -->
<h2 class="us">U.S. College and Universities</h2>
<br />
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSADiv">
<div id="institutionUSALabelDiv"><label for="institutionUSAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionUSAIdSelect" name="institutionUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSADiv">
<div id="campusUSALabelDiv"><label for="campusUSAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSAIdSelect" name="campusUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSADiv">
<div id="programUSALabelDiv"><label for="programUSAIdSelect">Select Your Program</label></div>
<select size="1" id="programUSAIdSelect" name="programUSAId"></select>
</div>
<div id="buttonDivUS"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="canada">Canada Colleges and Universities </h2>
<br />
<div style="visibility:visible" id='stateProvince2Div'>
<div id='stateCALabelDiv'><label for="stateCAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateCAIdSelect" name="stateCAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionCADiv">
<div id="institutionCALabelDiv"><label for="institutionCAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionCAIdSelect" name="institutionCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusCADiv">
<div id="campusCALabelDiv"><label for="campusCAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusCAIdSelect" name="campusCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programCADiv">
<div id="programCALabelDiv"><label for="programCAIdSelect">Select Your Program</label></div>
<select size="1" id="programCAIdSelect" name="programCAId"></select>
</div>
<div id="buttonDivCA"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="us">U.S Schools K-12 </h2>
<br />
<div style="visibility:visible" id="stateProvince3Div">
<div id="stateUSK12LabelDiv"><label for="stateUSK12IdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSK12IdSelect" name="stateUSK12Id">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSK12Div">
<div id="institutionUSK12LabelDiv"><label for="institutionUSK12IdSelect">Select Your Institution</div>
<select size="1" id="institutionUSK12IdSelect" name="institutionUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSK12Div">
<div id="campusUSK12LabelDiv"><label for="campusUSK12IdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSK12IdSelect" name="campusUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSK12Div">
<div id="programUSK12LabelDiv"><label for="programUSK12IdSelect">Select Your Program</label></div>
<select size="1" id="programUSK12IdSelect" name="programUSK12Id"></select>
</div>
<div id="buttonDivK12"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
String.prototype.startsWith = function(s) { return this.indexOf(s)==0; }
var uri = '/webapp/wcs/stores/servlet/StoreFinderAJAX';
var servletPath = '/webapp/wcs/stores/servlet/';
var pageType = 'FLGStoreCatalogDisplay';
var catalogId = '10001';
var categoryId = 'null';
var langId = '-1';
var demoKey = 'null';
var extraParams = 'null'; // only used for User Registration page
var multiSelect = false;
var forwardURLLocation = '';
// This map is used to determine the URI used for forwarding the user
var forwardPage = Object;
forwardPage['FLGStoreCatalogDisplay'] = 'StoreCatalogDisplay';
forwardPage['FLUserSelectSchool'] = 'UserAccountUpdateDemographicsForm';
forwardPage['FLGBuybackInfoPage'] = 'AboutBuybackView';
forwardPage['FLEdoptionsDisplayGlobal'] = 'EdoptionSearchView';
forwardPage['CGSelectStoreDisplay'] = 'CustomtsSelectedStore';
forwardPage['FLLocateStoreCourseMaterials'] = 'LocateCourseMaterialsView';
forwardPage['FLGGenMerchDisplay'] = 'CategoryDisplay';
function onPageLoad() {
AjaxQueue.setBatchSize(1);
getData(buildParms('STATESUS', 'US', 'stateUSAIdSelect'));
getData(buildParms('STATESCA','CA', 'stateCAIdSelect'));
getData(buildParms('STATESK12','K12', 'stateUSK12IdSelect'));
}
accessibleSelect=function(){
var selectedStateUSIndex;
var selectedInstUSIndex;
var selectedCampusUSIndex;
var selectedProgramUSIndex;
var selectedStateCAIndex;
var selectedInstCAIndex;
var selectedCampusCAIndex;
var selectedProgramCAIndex;
var selectedStateK12Index;
var selectedInstK12Index;
var selectedCampusK12Index;
var selectedProgramK12Index;
var stateUSAIdSelectBox = document.getElementById("stateUSAIdSelect");
stateUSAIdSelectBox.onchange=function(){
callUSStateAjax();
};
stateUSAIdSelectBox.onkeyup=function(e){
callUSStateAjax();
};
function callUSStateAjax() {
if(selectedStateUSIndex != stateUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSASelect()");
selectedStateUSIndex = stateUSAIdSelectBox.selectedIndex;
selectedInstUSIndex = '';
selectedCampusUSIndex = '';
selectedProgramUSIndex = '';
}
}
var institutionUSAIdSelectBox = document.getElementById("institutionUSAIdSelect");
institutionUSAIdSelectBox.onchange=function(){
callInstUSAjax();
};
institutionUSAIdSelectBox.onkeyup=function(e){
callInstUSAjax();
};
function callInstUSAjax() {
if(selectedInstUSIndex != institutionUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSASelect()");
selectedInstUSIndex = institutionUSAIdSelectBox.selectedIndex;
selectedCampusUSIndex = null;
selectedProgramUSIndex = null;
}
}
var campusUSAIdSelectBox = document.getElementById("campusUSAIdSelect");
campusUSAIdSelectBox.onchange=function(){
callCampusUSAjax();
};
campusUSAIdSelectBox.onkeyup=function(e){
callCampusUSAjax();
};
function callCampusUSAjax() {
if(selectedCampusUSIndex != campusUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USA()");
selectedCampusUSIndex == campusUSAIdSelectBox.selectedIndex;
selectedProgramUSIndex = null;
}
}
var programUSAIdSelectBox = document.getElementById("programUSAIdSelect");
programUSAIdSelectBox.onchange=function(){
callProgramUSAjax();
};
programUSAIdSelectBox.onkeyup=function(e){
callProgramUSAjax();
};
function callProgramUSAjax() {
if(selectedProgramUSIndex != programUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USA()");
selectedProgramUSIndex = programUSAIdSelectBox.selectedIndex;
}
}
var stateCAIdSelectBox = document.getElementById("stateCAIdSelect");
stateCAIdSelectBox.onchange=function(){
callStateCAAjax();
};
stateCAIdSelectBox.onkeyup=function(e){
callStateCAAjax();
};
function callStateCAAjax() {
if(selectedStateCAIndex != stateCAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateCASelect()");
selectedStateCAIndex = stateCAIdSelectBox.selectedIndex;
selectedInstCAIndex = null;
selectedCampusCAIndex = null;
selectedProgramCAIndex =null;
}
}
var institutionCAIdSelectBox = document.getElementById("institutionCAIdSelect");
institutionCAIdSelectBox.onchange=function(){
callInstCAAjax();
};
institutionCAIdSelectBox.onkeyup=function(e){
callInstCAAjax();
};
function callInstCAAjax() {
if(selectedInstCAIndex != institutionCAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteCASelect()");
selectedInstCAIndex = institutionCAIdSelectBox.selectedIndex;
selectedCampusCAIndex = null;
selectedProgramCAIndex = null;
}
}
var campusCAIdSelectBox = document.getElementById("campusCAIdSelect");
campusCAIdSelectBox.onchange=function(){
callCampusCAAjax();
};
campusCAIdSelectBox.onkeyup=function(e){
callCampusCAAjax();
};
function callCampusCAAjax() {
if(campusCAIdSelectBox != campusCAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_CA()");
selectedCampusCAIndex == campusCAIdSelectBox.selectedIndex;
selectedProgramCAIndex = null;
}
}
var programCAIdSelectBox = document.getElementById("programCAIdSelect");
programCAIdSelectBox.onchange=function(){
callProgramCAAjax();
};
programCAIdSelectBox.onkeyup=function(e){
callProgramCAAjax();
};
function callProgramCAAjax() {
if(selectedProgramCAIndex != programCAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_CA()");
selectedProgramCAIndex = programCAIdSelectBox.selectedIndex;
}
}
var stateUSK12IdSelectBox = document.getElementById("stateUSK12IdSelect");
stateUSK12IdSelectBox.onchange=function(){
callStateK12Ajax();
};
stateUSK12IdSelectBox.onkeyup=function(e){
callStateK12Ajax();
};
function callStateK12Ajax() {
if(selectedStateK12Index != stateUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSK12Select()");
selectedStateK12Index = stateUSK12IdSelectBox.selectedIndex;
selectedInstK12Index = null;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var institutionUSK12IdSelectBox = document.getElementById("institutionUSK12IdSelect");
institutionUSK12IdSelectBox.onchange=function(){
callInstK12Ajax();
};
institutionUSK12IdSelectBox.onkeyup=function(e){
callInstK12Ajax();
};
function callInstK12Ajax() {
if(selectedInstK12Index != institutionUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSK12Select()");
selectedInstK12Index = institutionUSK12IdSelectBox.selectedIndex;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var campusUSK12IdSelectBox = document.getElementById("campusUSK12IdSelect");
campusUSK12IdSelectBox.onchange=function(){
callCampusK12Ajax();
};
campusUSK12IdSelectBox.onkeyup=function(e){
callCampusK12Ajax();
};
function callCampusK12Ajax() {
if(selectedCampusK12Index != campusUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USK12()");
selectedCampusK12Index == campusUSK12IdSelectBox.selectedIndex;
selectedProgramK12Index = null;
}
}
var programUSK12IdSelectBox = document.getElementById("programUSK12IdSelect");
programUSK12IdSelectBox.onchange=function(){
callProgramK12Ajax();
};
programUSK12IdSelectBox.onkeyup=function(e){
callProgramK12Ajax();
};
function callProgramK12Ajax() {
if(selectedProgramK12Index != programUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USK12()");
selectedProgramK12Index = programUSK12IdSelectBox.selectedIndex;
}
}
}
// Start state
function onStateUSASelect() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer("campusUSADiv");showLayer("institutionUSADiv");addLoadingOption("institutionUSA");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSADiv"); return; }
getData(buildParms('INSTITUTESUS', 'US', 'stateProvinceId='+$('stateUSAIdSelect').value)) ;
}
function onStateCASelect() {
hideLayer("errorDiv");hideLayer("programCADiv");hideLayer("campusCADiv");showLayer("institutionCADiv");addLoadingOption("institutionCA");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateCAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionCADiv"); return; }
getData(buildParms('INSTITUTESCA', 'CA', 'stateProvinceId='+$('stateCAIdSelect').value)) ;
}
function onStateUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSK12Div");hideLayer("campusUSK12Div");showLayer("institutionUSK12Div");addLoadingOption("institutionUSK12");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('stateUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSK12Div"); return; }
getData(buildParms('INSTITUTESK12', 'K12', 'stateProvinceId='+$('stateUSK12IdSelect').value)) ;
}
//End State
//Start Institute
function onInstituteUSASelect() {
hideLayer("errorDiv"); hideLayer("programUSADiv");hideLayer('campusUSADiv');hideLayer('buttonDivUS');
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSADiv"); return; }
getData(buildParms('CAMPUSUS','US', 'institutionId='+$('institutionUSAIdSelect').value));
}
function onInstituteCASelect() {
hideLayer("errorDiv");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionCAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusCADiv"); return; }
getData(buildParms('CAMPUSCA','CA','institutionId='+$('institutionCAIdSelect').value));
}
function onInstituteUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer('campusK12Div');hideLayer('buttonDivK12');
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('institutionUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSK12Div"); return; }
getData(buildParms('CAMPUSK12','K12','institutionId='+$('institutionUSK12IdSelect').value));
}
// End of Institutions
// Start Campus
function onCampusSelect_USA() {
if($('campusUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("programUSADiv"); hideLayer("errorDiv"); hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSUS','US','campusId='+$('campusUSAIdSelect').value + "&institutionId=" + $('institutionUSAIdSelect').value));
}
function onCampusSelect_CA() {
if($('campusCAIdSelect').value == ''){clearAJAXTimer();hideLayer("programCADiv"); hideLayer("errorDiv"); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSCA','CA', 'campusId='+$('campusCAIdSelect').value + "&institutionId=" + $('institutionCAIdSelect').value));
}
function onCampusSelect_USK12() {
if($('campusUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("programUSK12Div"); hideLayer("errorDiv"); hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSK12','K12', 'campusId='+$('campusUSK12IdSelect').value + "&institutionId=" + $('institutionUSK12IdSelect').value));
}
// End of Campus
// Program Select
function onProgramSelect_USA() {
if($('programUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSAIdSelect").value, null, 'buttonDivUS');
}
function onProgramSelect_CA() {
if($('programCAIdSelect').value == ''){clearAJAXTimer(); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programCAIdSelect").value, null,'buttonDivCA');
}
function onProgramSelect_USK12() {
if($('programUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSK12IdSelect").value, null, 'buttonDivK12');
}
// End of Program Select.
// Loading Drop downs starts
function loadSTATESUS(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSA", data, meta, "stateUSAIdSelect");
}
function loadSTATESCA(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateCA", data, meta, "stateCAIdSelect");
}
function loadSTATESK12(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSK12", data, meta, "stateUSK12IdSelect");
}
function loadINSTITUTESUS(data, meta) {

You can grab the select with prototype and the id of the select.
$('stateUSAIdSelect');
Or the options with a css rule
$$('#stateUSAIdSelect option');
What are you actually trying to do with them?
UPDATE:
Sorry, I misunderstood the question I think. You're trying to figure out how to test those elements with htmlunit?
To get the select you can use getHtmlElementById
page.getHtmlElementById("stateUSAIdSelect");
From there you can call getChildNodes to grab all the options from the select.
The javadoc for htmlunit outlines a whole bunch of other methods you should be able to use as well http://htmlunit.sourceforge.net/apidocs/index.html.
Hope that helps.