I have a form where I'm creating a combo dynamically in a javascript file. When the combo-box item changes, I want to display sort of a help text right below the combo.
I am creating the combo(with the id: WhereOperatorCombo)as shown below and have added an event listener.
$("#lot").append(
"<h5> Select an Operator </h5>"+
"<div class='col-md-12'>"+
"<select id='WhereOperatorCombo' name='WhereOperatorCombo' class='form-control'>"+
"<option value='Select an option'>Select an option</option>"+
"<optgroup label='--Comparison Operators--'>"+
"<option value='equal'>=</option>"+
"<option value='notequal'>!=</option>"+
"<option value='gt'>"+gt+"</option>"+
"<option value='lt'>"+lt+"</option>"+
"<option value='gte'>"+gte+"</option>"+
"<option value='lte'>"+lte+"</option>"+
"<option value='ngt'>"+ngt+"</option>"+
"<option value='nlt'>"+nlt+"</option>"
);
$("#WhereOperatorCombo").append(
"<optgroup><optgroup label='--Logical Operators--'>"
);
for (var k = 0; k < logicalOperatorListArray.length; k++)
{
$("#WhereOperatorCombo").append(
"<option value="+logicalOperatorListArray[k]+">"+logicalOperatorListArray[k]+"</option>"
);
}
$("#WhereOperatorCombo").append(
"</optgroup></select>" +
"<div id='onchangeDefinition' class='col-md-12'></div>"+
"</div>"
);
document.getElementById("WhereOperatorCombo").addEventListener("change", function() {
displayValueinput();
}, false);
displayValueinput() method
function displayValueinput()
{
var myNode = document.getElementById("onchangeDefinition");
var fc = myNode.firstChild;
while( fc ) {
myNode.removeChild( fc );
fc = myNode.firstChild;
}
var choice=document.getElementById("WhereOperatorCombo");
var selectedOperator = choice.options[choice.selectedIndex].text;
if(selectedOperator == "=")
{
$("#onchangeDefinition").append(
"<h5> This operator filters the records that are equal the value that you provide</h5>"
);
}
else if(selectedOperator == "!=")
{
$("#onchangeDefinition").append(
"<h5> This operator filters the records that are NOT equal the value that you provide</h5>"
);
}
...
But the issue that I am facing is that nothing is being displayed in the
onchangeDefinitiondivision.
I tried displaying an alert within the if(selectedOperator == "!=") decision just to check whether it goes through that block, and I am getting the alert. But the help text is not being appended to the division as I intended.
Any suggestions in this regard will be highly appreciated.