[Resolved] show only last child of category

[Author]

Posts

[anujM]

Tell us what you are trying to do? i need to show only last child of each category

Is there any documentation that you are following?no

Is there a similar example that we can see?no

What is the link to your site?no

Example: i have two main categories with their sub categories

abc-----123-----a
xyz-----234-----b----c

in category dropdown on cred form should display a and c

I used select[name="category[]"] option[data-parent="-1"] {
display: none;
}
but hide only abc and xyz.
Thanks

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To keep only the last level taxonomy items, in the select type taxonomy field in a form, you'll need to include some custom script, in the form's "JS editor":

jQuery(document).ready(function( $ ) {
	// set target taxonomy slug
	var taxName = 'genre';
	// cycle through each option
	$("select[name='"+taxName+"[]'] option").each(function(index) {
		// remove extra spaces from current option's text
		$(this).text($.trim($(this).text()))
		// get current options value	
		var currVal = $(this).val();
		// if the current option's value is used as parent in another option
		if ( $("select[name='"+taxName+"[]'] option[data-parent="+currVal+"]").length != 0 ){
			// remove the current option
			$(this).remove();
		}
	});
});

In this example snippet, the target taxonomy slug was 'genre', but you can change it, as per your website.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[anujM]

Hi,
Thanks, it worked.

I need it alphabetically in overall currently its showing alphabetically category wise.

first item should always be not selected(----Not Selected---)
Thanks.

[Waqar]

Thanks for the update and glad that it worked.

To sort the options alphabetically and include a default select option (----Not Selected---), you can update the script from my last message to:

jQuery(document).ready(function( $ ) {

	// set target taxonomy slug
	var taxName = 'genre';

	// cycle through each option
	$("select[name='"+taxName+"[]'] option").each(function(index) {
		// remove extra spaces from current option's text
		$(this).text($.trim($(this).text()))
		// get current options value    
		var currVal = $(this).val();
		// if the current option's value is used as parent in another option
		if ( $("select[name='"+taxName+"[]'] option[data-parent="+currVal+"]").length != 0 ){
			// remove the current option
			$(this).remove();
		}
	});

	// sort options alphabatically
	var sel = $('select[name="'+taxName+'[]"]');
	var selected = sel.val();
	var opts_list = sel.find('option');
	opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
	sel.html('').append(opts_list);
	sel.val(selected);

	// insert default select option
	$('select[name="'+taxName+'[]"]').prepend('<option value="">----Not Selected---</option>');
	$('select[name="'+taxName+'[]"]')[0].selectedIndex = 0;  

});

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/