Jquery select2 ajax chained selects

Question

Requirement: <select1> contains a few options (placeholder text = "Select new or used Vehicles") <select2> disabled with no options (placeholder text = "Select Manufacturer")

<select1> user selects an option <select2> populated with results from 1

Utilize Jquery Select2 plugin

I've got the chained select working, populating select2 correctly, also using select2 plugin

Problems: I'd like the placeholder text to say "5 results found" when its got results I'd like the placeholder text to say "0 results found" when no results and go back to disabled At present, the placeholder text changes on first select, when re-selecting it messes up the select2 placeholder

HTML:

//<select1>
<select name='category_id' id='category_id'>
<option value='1'>New</option>
<option value='2'>Used</option>
</select>

//<select2>
<select name='make_id' id='make_id'><option value=''></option></select>

//javascript
<script type='text/javascript'>
    $(document).ready(function() {
        $('#category_id').select2({
            placeholder: 'Select new or used Vehicles',
            allowClear: true
        });
        $('#make_id').select2({
            placeholder: 'Select Manufacturer',
            allowClear: true
        });

        $('#category_id').change(function() {
            var selectedCategory = $('#category_id option:selected').val();
            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                dataType: 'html',
                data: {
                    a: 'dropDownsHome',
                    c: selectedCategory
                },
                success: function(txt){
                    //no action on success, its done in the next part
                }
            }).done(function(data){
                //get JSON
                data = $.parseJSON(data);
                //generate <options from JSON
                var list_html = '';
                $.each(data, function(i, item) {
                    list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>';
                });
                //replace <select2 with new options
                $('#make_id').html(list_html);
                //set to enabled|disabled
                if (data.length > 1) {
                    $('#make_id').select2('enable', true); //enable form
                }else{
                    $('#make_id').select2('enable', false); //disable form
                }
                //change placeholder text
                $('#make_id').select2({placeholder: data.length +' results'});
            })
        });
    });
</script>

//JSON result from ajax.php (if no results, false is returned) [{"id":"1","make":"Foton"},{"id":"4","make":"Hyundai"},{"id":"5","make":"KIA"},{"id":"2","make":"Proton"},{"id":"2","make":"Proton"},{"id":"3","make":"Tata"},{"id":"3","make":"Tata"},{"id":"6","make":"Toyota"}]

Shinov T Shinov T · Accepted Answer · 2013-06-13T11:03:05

Try upgrading the plugin,

I tried with 3.4.0 version enable and disable is working fine and also add

list_html += ' <option value=""></option>';

Above line along with the code, then placeholder will also show..I have paisted the edited code below

//generate <options from JSON
            var list_html = '';
            list_html += ' <option value=""></option>';

            $.each(data, function(i, item) {
                list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>';
            });
            //replace <select2 with new options
            $('#make_id').html(list_html);
            //set to enabled|disabled
            if (data.length > 1) {
                $('#make_id').select2('enable', true); //enable form
                $('#make_id').select2({placeholder: data.length +' results'});

            }else{

                $('#make_id').select2('enable', false); //disable form
                $('#make_id').select2({placeholder: 0 +' results'});


            }

Jquery select2 ajax chained selects

1 Answers