When I clear option select onChange doesn't work again

Question

I have this code:

success: function (data) {
                $('#' + idDivRefresh).endLoading();
                if (data.message != '@Geral.Sucesso') {
                    $('#' + idDropDown + 'option:selected').prop("selected", false)
                    $('#input-' + idDropDown).val('');
                    $('#' + idDropDown + 'option').each(function () {
                        if (this.defaultSelected) {
                            this.selected = true;
                            return false;
                        }
                    });
                    alert(data.message);
                }
            }

I clear option selected on dropdown. But when I select again another option, function for 'onChange' doesn't work.

HTML

<div id="iddb78e" class="field-Small">
    <select data-val="true" data-val-number="The field Ente must be a number." id="iddb78e" name="fornecedorVerbal.IdEnteIniciativaInvestment" style="display: none;">
    <option value=""> </option>
    <option value="4">30B66 - BUY CHANGES</option>
   </select>
    <input class="dropdown" type="text" id="input-iddb78e" autocomplete="off"></div>

Script OnChange

<script language="javascript" type="text/javascript">
    $("#iddb78e select")
        .change(function () {
            Tst(53287)
        })
        .loadOptions('/Tst/Method/ListarJsonEnte?IdIniciativa=2105')
        .turnAutoComplete();
</script>

What's wrong?

Answer 1

The CSS selector that you build with the following expression:

'#' + idDropDown + 'option'

...will become...

'#iddb78eoption'

So jQuery will look for an element with the id iddb78eoption which it obviously does not find. So nothing happens as a result.

What you really want is a space (or greater-than sign) there:

'#iddb78e option'

So make sure to add that space like this:

'#' + idDropDown + ' option'

There are two places in your code where this needs to happen.