https://principalsbuyersguide.com/Scripts/Pages/Search/SearchInput.js?v=29957315917

1function GetSearchInputModel() {
2    var self = this;
3
4    var countries;
5    var states;
6    var stateId;
7    var countryId;
8
9    self.initModel = function (model) {
10        countries = model.Countries;
11        states = model.States;
12        stateId = model.StateId;
13        countryId = model.CountryId;
14        initSelectedValues();
15    }
16
17    function initSelectedValues() {
18        if (countryId) {
19            $("select.country-select option").filter(function () {
20                return $(this).val() == countryId;
21            }).prop('selected', true);
22            $('select.country-select ')
23              .val(countryId)
24              .trigger('change');
25        }
26
27        if (stateId) {
28            $("select.state-select option").filter(function () {
29                return $(this).val() == stateId;
30            }).prop('selected', true);
31        }
32    }
33
34    self.getStatesOfCountry = function(countryId) {
35        var countries = [];
36
37        for (var i = 0; i < states.length; i++) {
38            if (states[i].CountryId == countryId) {
39                countries.push(states[i]);
40            }
41        }
42
43        return countries;
44    }
45
46    return self;
47}
48
49var customSelect = true; // Flag which indicates if select elements are already customized
50var stateProvince = $('#StateProvince');
51var tabletWidth = 768;
52
53// It's suggested that in the element with class 'className' we have select which need to be replaced
54// Then we generate bootstrap dropdown markup and bind it to the select which must be replaced
55// After that insert generated markup into the page and hide select
56function fillOptions($element, list) {
57    $element.find('option').each(function() {
58        var li = document.createElement('li');
59        li.setAttribute('data-value', this.value);
60        li.innerHTML = "<a href=\"javascript:;\">" + this.innerHTML + "</a>";
61        list.appendChild(li);
62    });
63}
64
65function customizeSelect(className) {
66    $('.' + className).each(function(index) {
67        var $select = $(this).find('select').first();
68        var ul = document.createElement('ul');
69        ul.className = 'dropdown-menu';
70        ul.setAttribute('aria-labelledby', 'dLabel-' + index);
71        fillOptions($select, ul);
72        var dropdown = document.createElement('div');
73        var button = document.createElement('button');
74        var caret = document.createElement('span');
75        var caption = caret.cloneNode();
76        caption.className = 'dropdown-caption';
77        button.id = 'dLabel-' + index;
78        button.className = 'btn btn-default';
79        button.setAttribute('aria-haspopup', true);
80        button.setAttribute('aria-expanded', false);
81        button.setAttribute('data-toggle', 'dropdown');
82        button.type = 'button';
83        caption.innerHTML = $select.find('option:first').html();
84        caret.className = 'caret';
85        button.appendChild(caret);
86        button.appendChild(caption);
87        dropdown.className = 'dropdown';
88        dropdown.appendChild(button);
89        $(ul).find('li').click(function() {
90            var index = $(this).index();
91            caption.innerHTML = this.childNodes[0].innerHTML;
92            $select.get(0).value = this.getAttribute('data-value');
93            $select.get(0).selectedIndex = index;
94            if ($select.get(0).id == "Country") {
95                $select.trigger('change');
96                //clean state dropdown
97                //$("#StateProvince + .dropdown .dropdown-caption").html($select.find('option:first').html());
98            }
99        });
100
101        //copy selected value from general list to mobile
102        if ($select.length !== undefined && $select.length > 0 && $select.get(0).value && $select.get(0).value != "0") {
103            caption.innerHTML = $("option:selected", $select).text();
104        }
105
106        dropdown.appendChild(ul);
107        $(dropdown).insertAfter($select);
108    });
109};
110
111// Revert customization of select fields
112function restoreSelect(className) {
113    $('.' + className).each(function() {
114        $(this).find('.dropdown')
115          .remove()
116          .end()
117          .find('select')
118          .show();
119    });

120};
121
122customizeSelect('customize-select');
123customSelect = false;
124
125var searchInputModel = GetSearchInputModel();
126
127$('select.country-select').on('change', function () {
128    var countryId = $(this).val();
129
130    var states = [];
131
132    $(".state-select").parent().find('button .dropdown-caption').html("State/Province");
133
134    $.ajax("/Ajax/StateProvince", {
135        type: "POST",
136        data: {
137            term: countryId
138        },
139        success: function (data) {
140            states = data;
141            var $el = $(".state-select");
142            $el.empty(); // remove old options
143            $el.append($("<option></option>").attr("value", "").text("State/Province"));
144            $.each(states, function (value, state) {
145                $el.append($("<option></option>")
146                  .attr("value", state.Value).text(state.Text));
147            });
148
149            //mobile list
150            if (customSelect === false) {
151                var mobileList = document.querySelector('#StateProvince + .dropdown .dropdown-menu');
152
153                var $caption = $(mobileList).parent().find('button .dropdown-caption');
154                $(mobileList).find('li').remove();
155                fillOptions(stateProvince, mobileList);
156                $(mobileList).find('li').click(function() {
157                    var index = $(this).index();
158                    $caption.html(this.childNodes[0].innerHTML);
159                    $el.get(0).value = this.getAttribute('data-value');
160                    $el.get(0).selectedIndex = index;
161                });
162            }
163
164            //general list
165            var generalList = document.querySelector('#StateProvince');
166            $(generalList).find('li').remove();
167            fillOptions(stateProvince, generalList);
168        }
169    });
170});
171