#ARC-35

assets/index.js

@@ -1,17 +1,19 @@
 // Fancy widget initializations ------------------------
 
-
 $(function() {
-    //$('.-select2').select2({
-    //    language: 'ru',
-    //})
-    
+    var $specSelects = $('.-spec-select')
     
-    $('.-select2').select2({
+    var select2Options = {
+        language: 'ru',
+        //minimumInputLength: 1, // Commented out to immediately load remote data
+        placeholder: '', // Required by `allowClear`
+        allowClear: true,
+        
         ajax: {
-            url: "/api/specializations/",
+            url: '/api/specializations/',
             dataType: 'json',
             delay: 250,
+            cache: true,
             
             data: function(params) {
                 return {
@@ -28,23 +30,53 @@ $(function() {
                         return {
                             text: item.name,
                             id: item.id,
+                            orig_item: item,
                         }
                     }, data.results),
                     
                     pagination: {
-                        more: (params.page * 10) < data.count
+                        more: (params.page * 10) < data.count,
                     },
                 }
             },
-            
-            //cache: true
         },
+    }
+    
+    $specSelects.select2(select2Options)
+    
+    var $specSelect1 = $('.-spec-select-level-1')
+    var $specSelect2 = $('.-spec-select-level-2')
+    var $specSelect3 = $('.-spec-select-level-3')
+    var $specSelect4 = $('.-spec-select-level-4')
+    
+    //$specSelect1.on('select2:select', function($evt) {
+    //    
+    //})
+    
+    $specSelect2.on('select2:select', function($evt) {
+        var spec = $evt.params.data.orig_item
+        
+        $specSelect1.append('<option value="'+ spec.parent.id + '">' + spec.parent.name + '</option>').trigger('select2:select')
+    })
+    
+    $specSelect3.on('select2:select', function($evt) {
+        var spec = $evt.params.data.orig_item
         
-        //escapeMarkup: function(markup) {return markup}, // let our custom formatter work
-        minimumInputLength: 1,
-        //templateResult: formatRepo, // omitted for brevity, see the source of this page
-        //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
+        $specSelect2.append('<option value="'+ spec.parent.id + '">' + spec.parent.name + '</option>').trigger('select2:select')
+        $specSelect1.trigger('select2:select')
     })
+    
+    $specSelect4.on('select2:select', function($evt) {
+        var spec = $evt.params.data.orig_item
+        
+        $specSelect3.append('<option value="'+ spec.parent.id + '">' + spec.parent.name + '</option>').trigger('select2:select')
+        $specSelect2.trigger('select2:select')
+    })
+    
+    window.$specSelect1 = $specSelect1
+    window.$specSelect2 = $specSelect2
+    window.$specSelect3 = $specSelect3
+    window.$specSelect4 = $specSelect4
 })
 
 

projects/forms.py

@@ -53,7 +53,7 @@ class CustomerProjectEditForm(forms.ModelForm):
         self.fields['realty'].empty_label = 'Создать новый'
         
         self.fields['specialization'].queryset = Specialization.objects.exclude(id=1)
-        self.fields['specialization'].widget.attrs = {'class': '-select2', 'style': 'width: 100%'}
+        self.fields['specialization'].widget.attrs = {'class': '-spec-select', 'style': 'width: 100%'}
         
         if self.instance.pk:
             self.fields['files'].queryset = self.instance.files

projects/templates/customer_project_create.html

@@ -87,16 +87,16 @@
 {#                            </div>#}
 
                             <div class="col-lg-3">
-                                <select class="-select2" style="width: 100%"></select>
+                                <select class="-spec-select -spec-select-level-1" style="width: 100%"></select>
                             </div>
                             <div class="col-lg-3">
-                                <select class="-select2" style="width: 100%"></select>
+                                <select class="-spec-select -spec-select-level-2" style="width: 100%"></select>
                             </div>
                             <div class="col-lg-3">
-                                <select class="-select2" style="width: 100%"></select>
+                                <select class="-spec-select -spec-select-level-3" style="width: 100%"></select>
                             </div>
                             <div class="col-lg-3">
-                                <select class="-select2" style="width: 100%"></select>
+                                <select class="-spec-select -spec-select-level-4" style="width: 100%"></select>
                             </div>
                         </div>
                         <div class="titleF1 titleF2 disTab">