J
Jonathan Parkes
I am having a problem with a select element that is modified at run-time
in JavaScript. An additional option is added if the user enters any text
in an adjacent textbox. The option is removed if the textbox is cleared.
I have this functionality working fine, but there is a side-effect. If
the user enters some text in the textbox, then clicks the combo box, it
drops down and is immediately the list is retracted again. It requires a
further two clicks to get the list to drop down again.
Here is the relevant snippet of code:
<select id="cboReservationDate">
<option value="0">Current</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
{etc. for other working days}
</select>
<input id="txtTicketNumber" onkeypress="txtTicketNumber_onkeypress();"
onchange="txtTicketNumber_onchange();" value="">
<script language="javascript" type="text/javascript">
<!--
//only allow characters 0-9
function txtTicketNumber_onkeypress()
{
if ((window.event.keyCode < 48) || (window.event.keyCode > 57))
window.event.keyCode = 0;
}
//if there are any data in the ticket number textbox, add an "all"
option to the reservation date combo box
function txtTicketNumber_onchange()
{
var indexOfAll;
if (txtTicketNumber.value == '')
{
//if "all" is the currently selected value, reset to "current"
if (cboReservationDate.value == '999')
cboReservationDate.value = '0';
//remove "all" option from date combo if it exists
if ((indexOfAll = indexOfAllOption()) > -1)
cboReservationDate.options.remove(indexOfAll);
}
else
{
//add "all" option to date combo if it is not already there
if ((indexOfAll = indexOfAllOption()) == -1)
{
var oAllOption = document.createElement('OPTION');
oAllOption.text = 'All';
oAllOption.value = '999';
cboReservationDate.options.add(oAllOption);
}
}
}
function indexOfAllOption()
{
for (i=0; i < cboReservationDate.options.length; i++)
if (cboReservationDate.options.value == '999')
return i;
return -1;
}
Thanks in advance to anyone who can help!
Regards,
Jon.
in JavaScript. An additional option is added if the user enters any text
in an adjacent textbox. The option is removed if the textbox is cleared.
I have this functionality working fine, but there is a side-effect. If
the user enters some text in the textbox, then clicks the combo box, it
drops down and is immediately the list is retracted again. It requires a
further two clicks to get the list to drop down again.
Here is the relevant snippet of code:
<select id="cboReservationDate">
<option value="0">Current</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
{etc. for other working days}
</select>
<input id="txtTicketNumber" onkeypress="txtTicketNumber_onkeypress();"
onchange="txtTicketNumber_onchange();" value="">
<script language="javascript" type="text/javascript">
<!--
//only allow characters 0-9
function txtTicketNumber_onkeypress()
{
if ((window.event.keyCode < 48) || (window.event.keyCode > 57))
window.event.keyCode = 0;
}
//if there are any data in the ticket number textbox, add an "all"
option to the reservation date combo box
function txtTicketNumber_onchange()
{
var indexOfAll;
if (txtTicketNumber.value == '')
{
//if "all" is the currently selected value, reset to "current"
if (cboReservationDate.value == '999')
cboReservationDate.value = '0';
//remove "all" option from date combo if it exists
if ((indexOfAll = indexOfAllOption()) > -1)
cboReservationDate.options.remove(indexOfAll);
}
else
{
//add "all" option to date combo if it is not already there
if ((indexOfAll = indexOfAllOption()) == -1)
{
var oAllOption = document.createElement('OPTION');
oAllOption.text = 'All';
oAllOption.value = '999';
cboReservationDate.options.add(oAllOption);
}
}
}
function indexOfAllOption()
{
for (i=0; i < cboReservationDate.options.length; i++)
if (cboReservationDate.options.value == '999')
return i;
return -1;
}
Thanks in advance to anyone who can help!
Regards,
Jon.