Browser can not parse HTML properly - Grails 2 - html

Question

I am generating HTML from controller (Backend) but browser can not parse that HTML properly.
Controller code:
def getValue (returnIndex) {
String dropDown = "<select name='" + returnIndex + "' style=''>"
def CatArr = new BudgetViewDatabaseService().executeQuery("SELECT c.id,c.name AS categoryName FROM chart AS a LEFT JOIN crtClass AS b ON a.id=b.chart_class_type_id LEFT JOIN chart_group AS c ON b.id=c.chart_class_id WHERE c.status=1")
if (CatArr.size()) {
for (int i = 0; i < CatArr.size(); i++) {
def catId = CatArr[i][0]
def ProductArr
ProductArr = new BudgetViewDatabaseService().executeQuery("SELECT id,accountCode,accountName FROM bv.crtMsr where status='1' AND chart_group_id='" + catId + "'")
if (ProductArr.size()) {
dropDown += "<optgroup label='" + CatArr[i][1] + "'>"
for (int j = 0; j < ProductArr.size(); j++) {
dropDown += "<option value='" + ProductArr[j][1] + "' >" + ProductArr[j][1] + " " + ProductArr[j][2] + "</option>"
}
dropDown += "</optgroup>"
}
}
}
dropDown += "</select>"
return dropDown
}
view page's code:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getValue('formFourGLAccount')}
</div>
issue:
Generated HTML looks like:
When I am opening that HTML on edit mode from browser then its looks like:
<select name='formFourGLAccount' style=''><optgroup
label='Overige immateriële bezittingen'><option value='0430' >0430 Overige niet
materiële bezittingen</option></optgroup><optgroup label='Computers en
computerapparatuur'><option value='0210' >0210 Computers en
computerapparatuur</option><option value='0211' >0211 Afschrijving computers en
computerapparatuur</option></optgroup><optgroup label='Overige materiële
bezittingen'><option value='0250' >0250 Overige materiële
bezittingen</option><option value='0251' >0251 Afschrijving overige materiele
bezittingen</option></optgroup><optgroup label='Waarborgsommen'><option
value='0300' >0300 Waarborgsommen</option></optgroup><optgroup
label='Deelnemingen in andere bedrijven'><option value='0310' >0310 Aandeel of belang
in andere bedrijven</option></optgroup><optgroup label='Strategische langlopende
beleggingen'><option value='0320' >0320 Strategische langlopende
beleggingen</option></optgroup><optgroup label='Verstrekte langlopende leningen
(hypotheek ed)'><option value='0330' >0330 Verstrekte langlopende leningen (hypotheek
ed)</option></optgroup><optgroup label='Overige financiële
bezittingen'><option value='0340' >0340 Overige financiële bezittingen</option></optgroup><optgroup label='Voorraad'><option
If I copy returns result (HTML) from controller and past it on browser manually then its working fine

Answer 1

You have not shown how that HTML is being rendered so it isn't clear specifically how to fix it, but what is happening is the content is being HTML encoded, which you do not want if you want the browser to evaluate the HTML tags.
EDIT Based On Comment:
<div class="fieldContainer fcCombo">
<label>
My GL <b>:</b>
</label>
${new CoreParamsHelperTagLib().getGLAccountExpanseBudgetForReconcilationOthersDropDown('formFourGLAccount')}
</div>
There is no good reason to create an instance of a taglib. You should invoke the tag as a GSP tag.
You are returning hardcoded HTML from your controller as a model variable. That is a bad idea, but not what you are asking about. If you really do want to do that, then you will need to prevent the data from being HTML encoded in your GSP. You can use the raw(your unescaped html code here) method in your GSP as one way to avoid the encoding.