[jQuery] [Bootstrap] [Ajax] Updaten van select lukt niet

[Harrie_]

Ben al uren aan het stoeien, maar kom er niet meer uit. Ik maak gebruik van HTML pagina die flink geflavoured is met Bootstrap en daarbinnen e.e.a. met JS, voornamelijk jQuery. Op deze pagina heb ik het volgende element staan:

HTML:

<select id="nawselect" name="nawselect" class="form-control show-tick" data-live-search="true" data-show-subtext="true">
</select>

Vervolgens voer ik bij het laden van de pagina een ajax-call uit om een standaard set options in die select te stoppen, het idee is dat ik dan bij bepaalde clicks die ajax-call opnieuw kan aanroepen en de options dynamisch kan wijzigen.

JavaScript:

$(function () {
    ajaxNaw('');
});

function ajaxNaw(contactid){
    $.ajax({
        type: "POST",
        url: "ajax_naw.php",
        data:'zoekwaarde='+contactid,
        success: function(data){
            $("#nawselect").html(data);
            console.log(data); // * Comment A
            console.log("#nawselect"); // * Comment B
        }
    });
}

ajax_naw.php retourneert het volgende:

HTML:

<option value="12345" data-subtext=" - Bedrijf X">12345</option>
<option value="12346" data-subtext=" - Bedrijf Y">12346</option>
<option value="12347" data-subtext=" - Bedrijf Z">12347</option>
etc.

Wat ik ook probeer, ik krijg de select niet geupdate met nieuwe options.
• Comment A in de JS logt alle HTML vanuit ajax_naw.php, deze wordt dus opgehaald
• Comment B in de JS logt de volledige select #nawselect met alle children, hier zitten de opgehaalde options in

Ik heb geprobeerd:
• om het select element te vervangen door een kale (non-bootstrap)select, zonder resultaat
• om d.m.v. jQuery's .appendTo opties toe te voegen, zonder resultaat
• om de native .innerHTML() te gebruiker, zonder resultaat

Wat zie ik over het hoofd of kan ik nog proberen om dit werkende te krijgen?

[Xtremelead]

In jsfiddle lijkt het prima te werken:
https://jsfiddle.net/x6x3sc92/1/

wordt je jquery wel goed en op het juiste moment geladen?

[Harrie_]

@Xtremelead die wordt zeker goed en op het juiste moment geladen. Na zeer lang zoeken heb ik het nu gevonden; het was een conflicterende jquery-plugin. Bedankt voor die JSfiddle-testcase; aan de hand daarvan heb ik besloten om alles mega kaal in te laden en één voor één alle JS-plugins en CSS-files aan te zetten.