jquery-selectize.js changed dropdown identification issue

Question

I want to know which dropdown is clicked or changed where multiple selectized dropdowns are exist. I have two containers having country and state dropdows. What I want to do is that, when a country dropdown is click the state dropdown which is in the same contanier as clicked country dropdown will be filled with fetched data.

my js code is follwing;

 var xhr , a;
 var country, $country;
 var city,  $city;

 $country = $(".select2-country").selectize({
                    render: {
                        option: function(item, escape) {
                            var markup = "<div>";
                            if (item.value !== undefined && item.value != 0) {
                                markup += '<img width="25px" src="http://www.geonames.org/flags/x/' + item.value.toLowerCase() + '.gif" />&nbsp;';
                            }
                            markup += item.text;
                            markup += '</div>';                     
                            return markup;
                        }
                    },
                    onChange: function(value) {
                        if (!value.length) return;
                        console.log(this);
                        city.disable();
                        city.clearOptions();
                        city.load(function(callback) {
                                                        xhr && xhr.abort();
                                                        xhr = $.ajax({
                                                                        url: draSite + '?index.php&option=com_dratransport&view=',
                                                                        dataType: 'json',
                                                                        data:{
                                                                            selected: value,
                                                                            task: 'getCities',
                                                                        },
                                                                        success: function(results) {
                                                                            city.enable();
                                                                            callback(results);
                                                                        },
                                                                        error: function() {
                                                                            callback();
                                                                        }
                                                        });
                                                    });
                    }
              });

$city = $('.select2-city').selectize({
    valueField: 'value',
    labelField: 'text',
    searchField: ['text'],
    sortField: 'sort',
    sortDirection: 'ASC',
    diacritics:true,
});

city  = $city[0].selectize;
//country = $country[0].selectize;  
city.disable();

Your way of defining javascript variables is a bit weird to me but you code looks fine. Now tell us why this isn't working :) — Johannes
– Johannes, Commented Sep 30, 2013 at 16:59
this is more comes from the selectize.js example site. I changed it little bit :D. Back to my problem, when I select the country box it should fill the next sibling having class selec2-city. But there is two country two city box which are in sperate conatiners with paris as country-state. — freezer
– freezer, Commented Sep 30, 2013 at 17:08

freezer · Accepted Answer · 2013-09-30 17:58:45Z

I did it like that. It works but I hope this is a good way for doing this.

var xhr , a;
var country, $country;
var city,  $city;

$country = $(".select2-country").selectize({
                    render: {
                        option: function(item, escape) {
                            var markup = "<div>";
                            if (item.value !== undefined && item.value != 0) {
                                markup += '<img width="25px" src="http://www.geonames.org/flags/x/' + item.value.toLowerCase() + '.gif" />&nbsp;';
                            }
                            markup += item.text;
                            markup += '</div>';                     
                            return markup;
                        }
                    },
                    onChange: function(value) {
                        city = $(this.$dropdown).parent().siblings('.select2-city')[0].selectize;
                        if (!value.length){city.clearOptions(); return;};                           
                        city.disable();
                        city.clearOptions();
                        city.load(function(callback) {
                                                        xhr && xhr.abort();
                                                        xhr = $.ajax({
                                                                        url: draSite + '?index.php&option=com_dratransport&view=',
                                                                        dataType: 'json',
                                                                        data:{
                                                                            selected: value,
                                                                            task: 'getCities',
                                                                        },
                                                                        success: function(results) {
                                                                            city.enable();
                                                                            callback(results);
                                                                        },
                                                                        error: function() {
                                                                            callback();
                                                                        }
                                                        });
                                                    });
                    },

              });

$city = $('.select2-city').selectize({
    valueField: 'value',
    labelField: 'text',
    searchField: ['text'],
    sortField: 'sort',
    sortDirection: 'ASC',
    diacritics:true,
});

for(var i = 0; i<$city.length; i++){
    city = $city[i].selectize;
    city.disable();
}
country = $country[0].selectize;

html code is;

<div id="first">First:<select id="countryfrom" name="countryfrom" class="select2-country" placeholder="Ülke Seçiniz...">
</select>
<select id="cityfrom" name="cityfrom" class="select2-city" placeholder="Şehir Seçiniz..." >
<option value="" selected="selected"></option>
<option value="0">Diğer</option> 
</select>
</div>
<div id="second">Second:<select id="countryto" name="countryto" class="select2-country" placeholder="Ülke Seçiniz...">
</select>
<select id="cityto" name="cityto" class="select2-city" placeholder="Şehir Seçiniz..." >
<option value="" selected="selected"></option>
<option value="0">Diğer</option>
</select>
</div>

Collectives™ on Stack Overflow

jquery-selectize.js changed dropdown identification issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related