Toggle VLANGroup scope selector fields

netbox/ipam/forms.py

@@ -1141,7 +1141,8 @@ class IPAddressFilterForm(BootstrapMixin, TenancyFilterForm, CustomFieldFilterFo
 class VLANGroupForm(BootstrapMixin, CustomFieldModelForm):
     scope_type = ContentTypeChoiceField(
         queryset=ContentType.objects.filter(model__in=VLANGROUP_SCOPE_TYPES),
-        required=False
+        required=False,
+        widget=StaticSelect2
     )
     region = DynamicModelChoiceField(
         queryset=Region.objects.all(),

netbox/templates/ipam/vlangroup_edit.html

@@ -35,3 +35,79 @@
         </div>
     {% endif %}
 {% endblock %}
+
+{% block javascript %}
+<script type="text/javascript">
+  // TODO: Employ form field attrs to clean up this mess
+  let scope_type = $('#id_scope_type');
+  scope_type.change(function() {
+    let label = this.options[this.selectedIndex].text;
+    if (label.endsWith('region')) {
+      $('#id_region').parents('.form-group').show();
+      $('#id_sitegroup').parents('.form-group').hide();
+      $('#id_site').parents('.form-group').hide();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('site group')) {
+      $('#id_region').parents('.form-group').hide();
+      $('#id_sitegroup').parents('.form-group').show();
+      $('#id_site').parents('.form-group').hide();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('site')) {
+      $('#id_region').parents('.form-group').show();
+      $('#id_sitegroup').parents('.form-group').show();
+      $('#id_site').parents('.form-group').show();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('location')) {
+      $('#id_region').parents('.form-group').show();
+      $('#id_sitegroup').parents('.form-group').show();
+      $('#id_site').parents('.form-group').show();
+      $('#id_location').parents('.form-group').show();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('rack')) {
+      $('#id_region').parents('.form-group').show();
+      $('#id_sitegroup').parents('.form-group').show();
+      $('#id_site').parents('.form-group').show();
+      $('#id_location').parents('.form-group').show();
+      $('#id_rack').parents('.form-group').show();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('cluster group')) {
+      $('#id_region').parents('.form-group').hide();
+      $('#id_sitegroup').parents('.form-group').hide();
+      $('#id_site').parents('.form-group').hide();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').show();
+      $('#id_cluster').parents('.form-group').hide();
+    } else if (label.endsWith('cluster')) {
+      $('#id_region').parents('.form-group').hide();
+      $('#id_sitegroup').parents('.form-group').hide();
+      $('#id_site').parents('.form-group').hide();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').show();
+      $('#id_cluster').parents('.form-group').show();
+    } else {
+      $('#id_region').parents('.form-group').hide();
+      $('#id_sitegroup').parents('.form-group').hide();
+      $('#id_site').parents('.form-group').hide();
+      $('#id_location').parents('.form-group').hide();
+      $('#id_rack').parents('.form-group').hide();
+      $('#id_clustergroup').parents('.form-group').hide();
+      $('#id_cluster').parents('.form-group').hide();
+    }
+  });
+  scope_type.change();
+</script>
+{% endblock %}