Bound cfselects' onClick causing issue

I have a cfselect which is working fine. I have an onclick event to refresh the binding to the cfselect because the query contents keep changing quite frequently and I want the users to have the updated list.Now i want to add "Select any Bus" as the first option which I am not able to do.

I tried adding a row to the query result ahead of it being returned from my cfc. But I am not able to select any other value other than 'Select any Bus'.

My cfselect code is:

<cfinvoke component="getCalculatorData" method="getAllBus"  argumentcollection="#houseArgs#" returnvariable="qry_busList">
<cfform style="align:centre" id="frm_drpDwnBus" name="frm_drpDwnBus"> 
<cfinput name="hdnrr" value="#rrSbstring#" type="hidden">
<cfselect name="dpDwnBs" bindOnLoad="true" 
  bind="cfc:getCalculatorData.getAllBus(hdnrr.value)" 
  value="busType_id_pk" 
  display="busType_name" >
  onclick="javascript:refresh(hdnrr.value)"
  <option value="0" on>Select a Bus</option>
</cfselect> 
</cfform> 

My cfc: SELECT busType_id_pk ,busType_name FROM tbl_bustype WHERE busType_railroad_letter=

javascript:

function refresh(开发者_运维百科s)
 {
  ColdFusion.Bind.assignValue('dpDwnBs','value', dataCalcu.getAllBus(s))
 }

As soon as i remove the onclick event all works fine. Please help me out here.

Having misread the question originally, let's take another swing.

A standing onclick bind event on a select box will never work. To use a select box the way most people do, you click it twice: once to drop it down, and once to select your item. However, on the first click you reset the item. Even if the box stays open (I suspect this might be browser dependent, but hanven't really tested), the second click will also reset it, meaning that you'll lose your selection, as the selected item is destroyed and recreated as a new DOM node.

I can think of three solutions.

First, you can add a refresh button to the form, and refresh the values in the select box then.

Second, you can use jQuery or similar to bind the event, and then onclick refresh the option list and then remove the onclick event binding. This means that the user can only refresh the options once, but (hopefully) that should be enough. If the page uis used multiple times (via AJAX for example) you can rebind the onclick refresh event on submission.

Finally, display the form item as an uneditable text field (onfocus="blur();" IIRC). Add a button, or change the focus event to launch a modal window that pulls the options from your CFC via AJAX or similar and displays them, so that anytime they choose to edit this item, they get a new set of choices.

All of these have the disadvantage of not preserving previous selections, as the bind refresh destroys all the option odes and builds a new option list.