JavaScript Forum

**somsahi** · 09-26-2006, 03:22 PM

Hi expected functionality -
I have two drop down .when value in one drop down is chosen other should show select and when value is chosen in second first one should automatically switch to select.
so to get this i have used following javascript.
present functionality-as soon as value from one dropdown the other swtiches to select just for moment then it takes previous value.the select should be stable not for seconds
<script language="javascript">
function submitRegion()
{
document.facilityForm.facility.selectedIndex = "0";
var ind = document.regionForm.region.selectedIndex;

if ( ind == 0)
{
alert('Please select the required region ..');
return;
}
else
{
document.regionForm.submit();
}
}
</script>
<script language="javascript">
function submitFacility()
{document.regionForm.region.selectedIndex = "0";

var ind = document.facilityForm.facility.selectedIndex;

if ( ind == 0)
{
alert('Please select the required facility ..');
return;
}
else
{
document.facilityForm.submit();
}
}
</script>

</HEAD>
<BODY >
<div class="menu" id="menubar">

<html:link action="/nation">National Audit Report</html:link>
<br></br>
<h1 style="font-size:12px">Regional Audit Report</h1>

<html:form action="/regionalauditreports">
Region: <html:select style="width:95px;" property="region" name="regionForm" size="1" onchange="submitRegion()">
<html

ption value="0">SELECT</html

ption>
<html

ptions property="regionList" name="regionForm" />

</html:select>
</html:form>
<br></br>
<h1 style="font-size:12px">IATA Audit Report</h1>


<html:form action="/iata">
Facility: <html:select property="facility" name="facilityForm" size="1" onchange="submitFacility()">
<html

ption value="0">SELECT</html

ption>
<html

ptions property="facilityList" name="facilityForm" />
</html:select>
<br></br>
</html:form>

<br></br>
<html:link page="/help.jsp">Help</html:link>

</div>
</BODY>
</html:html>

**Kirtan** · 09-27-2006, 08:45 AM

I have changed some of your html cause i am not familiar with that kind of syntax. The following code works both in IE and Firefox. Hope this helps.

Code:

<html>
<head><title>Hi</title>
<script language="javascript">
function toggle(id)
{
    if(id=='region')
    {
        document.getElementById('facility').selectedIndex=0;
    }
    else
    {
        document.getElementById('region').selectedIndex=0;
    }
}
</script>

</HEAD>
<BODY >
<div class="menu" id="menubar">
<!--
<%String name = (String) request.getAttribute("name");
//out.write(name);
%>
-->
<a href="/nation">National Audit Report</a>
<br></br>
<h1 style="font-size:12px">Regional Audit Report</h1>
<!-- <html:link action="/regionalauditreports">Regional Audit Report</html:link>
<<br></br>-->
<form action="/regionalauditreports">
Region: <select id="region" name="regionForm" onChange="toggle('region')">
<option value="0">SELECT</option>
<option property="regionList" name="regionForm">R List</option>
</select>
</form>
<br></br>
<h1 style="font-size:12px">IATA Audit Report</h1>
<!--<html:link action="/iata">IATA Audit Report</html:link>
<br></br>-->

<form action="/iata">
Facility: <select id="facility" name="facilityForm" onChange="toggle('facility')">
<option value="0">SELECT</option>
<option property="facilityList" name="facilityForm">F List</option>
</select>
<br></br>
</form>

<br></br>
<a href="/help.jsp">Help</a>


</div>
</BODY>
</html>