Related fields in a form

You appear to be writing a custom form from scratch using WP_Query to list your options.

To have a sortable select in a form, JavaScript is necessary.

The Pods shortcode has a form="1" option which will output a full form with the admin-defined user interface. It uses React.

WordPress Core enqueues have jquery-ui-sortable, which is a way of making elements sortable. It would not populate a select element; the form would need to be serialized with JavaScript.

Chosen by Harvest is a popular jQuery plugin for turning a select into a searchable UI. It is not sortable.

SortableJS is an example of another sorting library. Like jQuery UI, it creates proxy elements separate from a <select>.

Custom sortable forms require custom logic to submit IDs of relevant selected elements in the correct order.

See WP_Query if you’re looking to search or sort on the PHP side, or PHP usort() if there’s some sorting criteria desired on the server side that’s not provided by WP_Query.

See pods()->save() if you’re looking for a quick way to save the relationship IDs separate from update_post_meta() or add_post_meta()

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer