List -SubList- Sub-Sub-List conditional logic and display with CMB2

Honestly not sure how easy this would be out of the box. It’d likely take a fair amount of javascript/ajax to try and accomplish well.

If someone else has ideas for it, I’m all ears.

Hello Michael,
I can create the said functionality using simple html form with fields from the Jquery plugin : https://github.com/kartik-v/dependent-dropdown. I can also show you the code of how I fetch the parent and children of my wordpress and they work well. But I wish to create forms and fields now with cmb2 after realizing its usefulness.
Also there is something like cmb2 plugin : https://github.com/jcchavezs/cmb2-conditionals for conditional logic. I don’t know much about using it, since I couldn’t make it work properly.

Can we make custom fields with dependencies, can you guide me as how can I go about making it work with cmb2 ? Then we may also release it for the community as a new special field.

Thanks
Alam

Here is the simple HTML javascript code to accomplish the above functionality.

<!-- Select Basic Independent-->
			<div class="form-group">
				<label class="col-md-4 control-label" for="selectbasic">Select Field</label>
				<div class="col-md-3">
					<select id="select-field-id" class="form-control"
						name="select-field" required="">
						<option id="">Select...</option>
					</select>
				</div>
			</div>
			<!-- Select Basic Independent-->
			<div class="form-group">
				<label class="col-md-4 control-label" for="selectbasic">Select Area</label>
				<div class="col-md-3">
					<select id="select-area-id" class="form-control" name="select-area"
						required="">
						<option id="">Select...</option>
					</select>
				</div>
			</div>

			<!-- Select Basic (Parent)-->
			<div class="form-group">
				<label class="col-md-4 control-label" for="selectbasic">Select Type</label>
				<div class="col-md-3">
					<select id="select-type-id" class="form-control" name="select-type"
						required="">
						<option id="">Select...</option>
					</select>
				</div>
			</div>
			<!-- Select Basic (Child #1)-->
			<div class="form-group">
				<label class="col-md-4 control-label" for="selectbasic">Select
					Organization</label>
				<div class="col-md-3">
					<select id="select-org-id" class="form-control" name="select-org"
						required="">
						<option id="">Select...</option>
					</select>
				</div>
			</div>
			<!-- Select Basic (Child #2)-->
			<div class="form-group">
				<label class="col-md-4 control-label" for="selectbasic">Select
					Publication</label>
				<div class="col-md-6">
					<select id="select-publication-id" class="form-control"
						name="select-publication" required="">
						<option id="">Select...</option>
					</select>
				</div>
			</div>

			<!-- Javascript call on document ready -->
			<script>

			$(document).ready(function(){

				// console.log("my registration template document loaded with dependent drop downs");  // Debug only feature

				// Parent
				$("#select-field-id").depdrop({
					url : '<?php echo manage_posts_helper::getRelativePathToActionScripts() . '/templates/get-fields.php' ?>',
					depends : ['projectname']
				});

				// Child # 1

				$("#select-area-id").depdrop({

					url : '<?php echo manage_posts_helper::getRelativePathToActionScripts() . '/templates/get-areas.php' ?>',

					depends : ['select-field-id']

				});

				// Child # 2

				$("#select-type-id").depdrop({

					url : '<?php echo manage_posts_helper::getRelativePathToActionScripts() . '/templates/get-types.php' ?>',

					depends : ['select-field-id','select-area-id']

				});

				// Child # 3

				$("#select-org-id").depdrop({

					url : '<?php echo manage_posts_helper::getRelativePathToActionScripts() . '/templates/get-organizations.php' ?>',

					depends : ['select-field-id','select-area-id','select-type-id']

				});

				// Child # 4

				$("#select-publication-id").depdrop({

					url : '<?php echo manage_posts_helper::getRelativePathToActionScripts() . '/templates/get-publications.php' ?>',

					depends : ['select-field-id','select-area-id','select-type-id', 'select-org-id']

				});
		</script>

Looks like that addon you linked to uses data attributes to set what field to make the current field rely on being set, before showing, and if desired, make it show only if set to a certain value. Sounds like it may be a good solution for what you need, really. Perhaps just tinker a bit more with it, review the examples and what’s going on there. I’ve tinkered myself briefly, and it looks like it’s working pretty slickly, I will need to bookmark that one.

Hello Michael,
I don’t know how do I integrate the dependent drop down javascript plugin with the cmb2 fields. I am not well versed with web technologies either, I mostly know C++. Can you show me something ? Can you share what you were able to do with the code ? We can build it into a proper field and release it to the community ?

Alam

I pretty literally just copy/pasted these lines in my localhost to test it out: https://github.com/jcchavezs/cmb2-conditionals/blob/master/example-functions.php#L79:L104

You have the first field, the checkbox. In the end, it’ll have the ID html attrbute of “_yourprefix_demo_checkbox”

You have the second field. It gets a data-attribute of “data-conditional-id” and the value matches the ID above, “_yourprefix_demo_checkbox”. This tells the resulting javascript to observe what’s going on with that checkbox. When the checkbox is checked, it will have the value of “on”, and when that checkbox is checked, this field will show.

You have the third field. It gets the data-attribute of “data-conditiona-id”, once again matching the checkbox ID of “_yourprefix_demo_checkbox”. It also gets a second data-attribute of “data-conditional-value”, and that is set to “off”. What that means is that when the checkbox has a value of “off” then this one is going to show, while the second field above no longer matches, causing that one to hide again.

There’s no javascript that you need write with this, just key/value pairings in the attributes section that need to match to show. The “data-conditional-id” is always going to be the id that is used for a different field that it needs to be watching for, and the “data-conditional-value” is the value that that field needs to match for this field to show.

All you need to do for each intended conditional field is to provide the two parameters: which other field to watch, by id, and what the value needs to match, or if it just needs to be set somehow for the current field to show.

The examples are going to be better than anything I can type up as those are from the person/people most familiar with their extension.

Just a matter of understanding the logic involved.

Any changes with this one AlamSyed?