Hiding a label when drop-down list is clicked

Question

I am displaying a label below a drop-down list once a task is complete, and I'd like the label to hide when a new task has been selected in the drop-down list without it posting back.

I have tried using lblMessage.Text = ""; but currently have:

<asp:DropDownList ID="ddlJob" runat="server" AutoPostBack="false" CssClass="combobox" 
  DataTextField="name" DataValueField="name" OnClick="hideOnKeyPress(); return true;">
</asp:DropDownList>

function hideOnKeyPress() {
    document.getElementById('lblMessage').style.display = 'none';
}

Expected: Label appears once task has finished and hides when a new one is selected.

Actual: Label appears once task has finished but remains until next selected task has finished.

Answer 1

I think you need to access the OnChangeEvent, so when you change the option of the dropdown the function will be called.

<asp:DropDownList Id="ddlJob" runat="server" AutoPostBack="false" OnSelectedIndexChanged="SelectedChange" 
      onchange="ddlChanged(this);"/>

In the function, if you store the current index value into a hidden field, you will have it even after a postback on the page. So if you have any postbacks on the page, you will still have that value. In retrospect, if you have multiple different values you need to check if they have appeared before or not you can make a concatenated string with previous values to compare.

Something like:

function ddlChanged(ddl){
var newIndex = true;
var previousIndices = $('hdnIndex').value;
var currentIndex = String(ddl.selectedValue);

//if no values exist before then just take the current index
if (previousIndices == null)
   previousIndices = (currentIndex);
else{
//else loop through the previous indices to check if the value has appeared before.
 var indexArray = previousIndices.split(",");
 for(i=0; i < indexArray.length; i++){
   if (indexArray[i] == currentIndex)
     newIndex = false;
  }
  if(newIndex){
   document.getElementById('lblMessage').style.display = 'none';
    previousIndices+= "," + currentIndex;
  }
}

Something like this?