Javascript - Changing tag-it source with select option

Question

I have a select with two options. When changing the select ... I want to filter/autocomplete a different database. Without http://aehlke.github.io/tag-it/ it's working fine and the autocomplete is changing the source ... but not with it. It stays at source_01.php although I see in the console the change of Test Source 01 to Test Source 02. What might causes this?

HTML:

<select id="search_database" class="form-control">
    <option value="1" selected="">Source 01</option>
    <option value="2">Source 02</option>
</select>

Javascript:

$('#search_database').on('change', function () {
    if ( $('#search_database').val() == 1 ) { 
        console.log('Test Source 01');          


        $("#input-newsearch").tagit({
            ...
            autocomplete: ({
                  source: function( request, response ) {
                    ...
                    $.ajax({
                        url: "/source_01.php",
                        ...
                    });
                  },                        
                    ... 
                })

            });


    } else if ( $('#search_database').val() == 2 ) {
        console.log('Test Source 02');          

        $("#input-newsearch").tagit({
            ...
            autocomplete: ({
                  source: function( request, response ) {
                    ...
                    $.ajax({
                        url: "/source_02.php",
                        ..
                    });
                  },                        
                    ...
                })
            });         

    } 

}); 

Answer 1

Your problem is the value not getting picked up by the script when you change the options if you want to pick the value of the changed option you've to do something similar to the below code.

HTML:

<label for="clientSelect" style="margin-left:14px;">Client:</label>
   <select name="clientSelect" id="clientSelect" onChange="clientId(this.id)" style="width:180px;"></select>
   <input type="text" id="clintId" size="1" hidden>

JavaScript:

function getClient(cId){
    //Get the selected ID using this.is in client side HTML then breaks it up using this to get the ID only
          var select = document.getElementById("catSelect"),
          optionId = select.options[select.selectedIndex],
          catId = optionId.id;

I use the hidden text filed to send the selected ID to my PHP then to the database.