Как встроить фильтр, который отображает дочерние категории, после выбора родительской в форму?
Очень прошу помочь разобраться и решить задачу. Я далек от кода . В форму нужно встроить фильтр, который будет отображать дочерние категории, при выборе родительской.
Как пример - вот такой фильтр http://demo.webslesson.info/search-option-in-dynamic-select-box/
Буду безумно признателен и благодарен за помощь.
<form class="cspmsl_form cspmsl_action_bar_top" data-map-id="map10" method="post" id="cspmsl_form" enctype="multipart/form-data" encoding="multipart/form-data" novalidate="novalidate">
<input type="hidden" name="object_id" value="37">
<!-- Begin CMB2 Fields -->
<input type="hidden" id="nonce_CMB2phpcspmsl_form" name="nonce_CMB2phpcspmsl_form" value="06dc03b9c3"><div class="cmb2-wrap form-table"><div id="cmb2-metabox-cspmsl_form" class="cmb2-metabox cmb-field-list"><div class="cmb-row cmb-type-title cmb2-id--cspm-infos" data-fieldtype="title">
<div class="cmb-td">
<h5 class="cmb2-metabox-title" id="-cspm-infos" data-hash="7s8a166gvol0" style="font-size:20px; color:#008fed; font-weight:400;">News</h5>
</div>
</div><div class="cmb-row cmb-type-text cmb2-id--cspm-post-title table-layout" data-fieldtype="text">
<div class="cmb-th">
<label for="_cspm_post_title">Title</label>
</div>
<div class="cmb-td">
<input type="text" class="regular-text" name="_cspm_post_title" id="_cspm_post_title" value="" data-hash="1idh46idmcs8" placeholder="" required="required">
</div>
</div><div class="cmb-row cmb-type-wysiwyg cmb2-id--cspm-post-content" data-fieldtype="wysiwyg">
<div class="cmb-th">
<label for="_cspm_post_content">Content</label>
</div>
<div class="cmb-td">
<div id="wp-_cspm_post_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active"><link rel="stylesheet" id="editor-buttons-css" href="https://stg.iidkhal.com/wp-includes/css/editor.min.css?ver=5.8.1" type="text/css" media="all">
<div id="wp-_cspm_post_content-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="_cspm_post_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="_cspm_post_content">Visual</button>
<button type="button" id="_cspm_post_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="_cspm_post_content">Text</button>
</div>
</div>
<div id="wp-_cspm_post_content-editor-container" class="wp-editor-container"><div id="qt__cspm_post_content_toolbar" class="quicktags-toolbar hide-if-no-js"><input type="button" id="qt__cspm_post_content_strong" class="ed_button button button-small" aria-label="Bold" value="b"><input type="button" id="qt__cspm_post_content_em" class="ed_button button button-small" aria-label="Italic" value="i"><input type="button" id="qt__cspm_post_content_link" class="ed_button button button-small" aria-label="Insert link" value="link"><input type="button" id="qt__cspm_post_content_block" class="ed_button button button-small" aria-label="Blockquote" value="b-quote"><input type="button" id="qt__cspm_post_content_del" class="ed_button button button-small" aria-label="Deleted text (strikethrough)" value="del"><input type="button" id="qt__cspm_post_content_ins" class="ed_button button button-small" aria-label="Inserted text" value="ins"><input type="button" id="qt__cspm_post_content_img" class="ed_button button button-small" aria-label="Insert image" value="img"><input type="button" id="qt__cspm_post_content_ul" class="ed_button button button-small" aria-label="Bulleted list" value="ul"><input type="button" id="qt__cspm_post_content_ol" class="ed_button button button-small" aria-label="Numbered list" value="ol"><input type="button" id="qt__cspm_post_content_li" class="ed_button button button-small" aria-label="List item" value="li"><input type="button" id="qt__cspm_post_content_code" class="ed_button button button-small" aria-label="Code" value="code"><input type="button" id="qt__cspm_post_content_more" class="ed_button button button-small" aria-label="Insert Read More tag" value="more"><input type="button" id="qt__cspm_post_content_close" class="ed_button button button-small" title="Close all open tags" value="close tags"></div><div id="mceu_24" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px; width: 100%;"><div id="mceu_24-body" class="mce-container-body mce-stack-layout"><div id="mceu_25" class="mce-top-part mce-container mce-stack-layout-item mce-first"><div id="mceu_25-body" class="mce-container-body"><div id="mceu_26" class="mce-toolbar-grp mce-container mce-panel mce-first mce-last" hidefocus="1" tabindex="-1" role="group"><div id="mceu_26-body" class="mce-container-body mce-stack-layout"><div id="mceu_27" class="mce-container mce-toolbar mce-stack-layout-item mce-first" role="toolbar"><div id="mceu_27-body" class="mce-container-body mce-flow-layout"><div id="mceu_28" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group"><div id="mceu_28-body"><div id="mceu_0" class="mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_0" role="button" aria-haspopup="true"><button id="mceu_0-open" role="presentation" type="button" tabindex="-1"><span class="mce-txt">Paragraph</span> <i class="mce-caret"></i></button></div><div id="mceu_1" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Bold (Ctrl+B)"><button id="mceu_1-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bold"></i></button></div><div id="mceu_2" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Italic (Ctrl+I)"><button id="mceu_2-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-italic"></i></button></div><div id="mceu_3" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Bulleted list (Shift+Alt+U)"><button id="mceu_3-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bullist"></i></button></div><div id="mceu_4" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Numbered list (Shift+Alt+O)"><button id="mceu_4-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-numlist"></i></button></div><div id="mceu_5" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Blockquote (Shift+Alt+Q)"><button id="mceu_5-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-blockquote"></i></button></div><div id="mceu_6" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align left (Shift+Alt+L)"><button id="mceu_6-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignleft"></i></button></div><div id="mceu_7" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align center (Shift+Alt+C)"><button id="mceu_7-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-aligncenter"></i></button></div><div id="mceu_8" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Align right (Shift+Alt+R)"><button id="mceu_8-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-alignright"></i></button></div><div id="mceu_9" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Insert/edit link (Ctrl+K)"><button id="mceu_9-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-link"></i></button></div><div id="mceu_10" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Insert Read More tag (Shift+Alt+T)"><button id="mceu_10-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-wp_more"></i></button></div><div id="mceu_11" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Fullscreen"><button id="mceu_11-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-fullscreen"></i></button></div><div id="mceu_12" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Toolbar Toggle (Shift+Alt+Z)"><button id="mceu_12-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-wp_adv"></i></button></div></div></div></div></div><div id="mceu_29" class="mce-container mce-toolbar mce-stack-layout-item mce-last" role="toolbar" style="display: none;"><div id="mceu_29-body" class="mce-container-body mce-flow-layout"><div id="mceu_30" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group"><div id="mceu_30-body"><div id="mceu_13" class="mce-widget mce-btn mce-first" tabindex="-1" aria-pressed="false" role="button" aria-label="Strikethrough (Shift+Alt+D)"><button id="mceu_13-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-strikethrough"></i></button></div><div id="mceu_14" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Horizontal line"><button id="mceu_14-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-hr"></i></button></div><div id="mceu_15" class="mce-widget mce-btn mce-splitbtn mce-colorbutton" role="button" tabindex="-1" aria-haspopup="true" aria-label="Text color"><button role="presentation" hidefocus="1" type="button" tabindex="-1"><i class="mce-ico mce-i-forecolor"></i><span id="mceu_15-preview" class="mce-preview"></span></button><button type="button" class="mce-open" hidefocus="1" tabindex="-1"> <i class="mce-caret"></i></button></div><div id="mceu_16" class="mce-widget mce-btn" tabindex="-1" aria-pressed="false" role="button" aria-label="Paste as text"><button id="mceu_16-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-pastetext"></i></button></div><div id="mceu_17" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Clear formatting"><button id="mceu_17-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-removeformat"></i></button></div><div id="mceu_18" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Special character"><button id="mceu_18-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-charmap"></i></button></div><div id="mceu_19" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Decrease indent"><button id="mceu_19-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-outdent"></i></button></div><div id="mceu_20" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Increase indent"><button id="mceu_20-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-indent"></i></button></div><div id="mceu_21" class="mce-widget mce-btn mce-disabled" tabindex="-1" role="button" aria-label="Undo (Ctrl+Z)" aria-disabled="true"><button id="mceu_21-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-undo"></i></button></div><div id="mceu_22" class="mce-widget mce-btn mce-disabled" tabindex="-1" role="button" aria-label="Redo (Ctrl+Y)" aria-disabled="true"><button id="mceu_22-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-redo"></i></button></div><div id="mceu_23" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Keyboard Shortcuts (Shift+Alt+H)"><button id="mceu_23-button" role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-wp_help"></i></button></div></div></div></div></div></div></div></div></div><div id="mceu_31" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><iframe id="_cspm_post_content_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press Alt-Shift-H for help." style="width: 100%; height: 170px; display: block;"></iframe></div><div id="mceu_32" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><div id="mceu_32-body" class="mce-container-body mce-flow-layout"><div id="mceu_33" class="mce-path mce-flow-layout-item mce-first"><div class="mce-path-item"> </div></div><div id="mceu_34" class="mce-flow-layout-item mce-last mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div></div></div></div></div><textarea class="cspmsl_required wp-editor-area" rows="6" autocomplete="off" cols="40" name="_cspm_post_content" id="_cspm_post_content" style="display: none;" aria-hidden="true"></textarea></div>
</div>
</div>
</div><div class="cmb-row cmb-type-cs-file cmb2-id--cspm-post-thumbnail" data-fieldtype="cs_file">
<div class="cmb-th">
<label for="_cspm_post_thumbnail">Featured image</label>
</div>
<div class="cmb-td">
<div class="cs_file_input_container"><div class="cs_open_browser" id="_cspm_post_thumbnail">Select or Drag a file</div><input type="file" name="_cspm_post_thumbnail" id="_cspm_post_thumbnail" class="cs_file_input" accept="image/jpeg,image/gif,image/png,image/bmp,image/tiff,image/x-icon" data-max-files="1" data-max-upload-size="67108864" style="visibility: hidden; height: 0px;"><input type="hidden" name="_cspm_post_thumbnail_id" id="_cspm_post_thumbnail_id" class="cs_file_id" data-multiple="" value=""></div><div class="cs_files_preview_area" id="_cspm_post_thumbnail"></div><p class="cmb2-metabox-description" style="margin-top:10px;"></p>
</div>
</div><div class="cmb-row cmb-type-taxonomy-multicheck-hierarchical cmb2-id--cspm-category" data-fieldtype="taxonomy_multicheck_hierarchical">
<div class="cmb-th">
<label for="_cspm_category">Categories</label>
</div>
<div class="cmb-td">
<p><span class="button-secondary cmb-multicheck-toggle">Select / Deselect All</span></p><ul class="cmb2-checkbox-list cmb2-list"> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category1" value="general" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category1">General</label></li>
<li class="cmb2-indented-hierarchy"><ul> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category2" value="economics" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category2">Economics</label></li>
<li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category3" value="politics" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category3">Politics</label></li>
</ul></li> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category4" value="green" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category4">Green</label></li>
<li class="cmb2-indented-hierarchy"><ul> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category5" value="natural-disasters" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category5">Natural Disasters</label></li>
</ul></li> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category6" value="red" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category6">Red</label></li>
<li class="cmb2-indented-hierarchy"><ul> <li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category7" value="conflicts" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category7">Conflicts</label></li>
<li><input type="checkbox" class="cmb2-option" name="_cspm_category[]" id="_cspm_category8" value="public-events" data-hash="3lfhjb2on9ng" required="required"> <label for="_cspm_category8">Public Events</label></li>
</ul></li></ul>
</div>
</div><div class="cmb-row cmb-type-text-url cmb2-id-url-source table-layout" data-fieldtype="text_url">
<div class="cmb-th">
<label for="url_source">Source link</label>
</div>
<div class="cmb-td">
<input type="text" class="cspmsl_text_url" name="url_source" id="url_source" value="" data-hash="5g65msju4an0" placeholder="">
<p class="cmb2-metabox-description">Link to the source of the news</p>
</div>
</div><div class="cmb-row cmb-type-title cmb2-id--cspm-gps-coordinates" data-fieldtype="title">
<div class="cmb-td">
<h5 class="cmb2-metabox-title" id="-cspm-gps-coordinates" data-hash="16kcf0g35bqo" style="font-size:20px; color:#008fed; font-weight:400;">Country</h5>
</div>
</div><div class="cmb-row cmb-type-cs-gmaps cmb2-id--cspm-location" data-fieldtype="cs_gmaps">
<div class="cmb-th">
<label for="_cspm_location">Address & GPS coordinates</label>
</div>
<div class="cmb-td">
<div class="cs_gmaps_container" data-map-id="_cspm_location" data-map-center="51.53096,-0.121064" data-map-zoom="12" data-latlng-field-type="separated"><div><div><label for="" class="cs-gmaps-label">Enter a location & search</label></div><div style="float:left; width:60%; margin-right:1em;"><input type="text" class="cs-gmaps-search cs-gmaps-preventDefault pac-target-input gm-err-autocomplete" name="_cspm_location[codespacing_progress_map_address]" id="_cspm_location[codespacing_progress_map_address]" value="" data-map-id="_cspm_location" placeholder="Ошибка" data-hash="4ugg7riv46c0" autocomplete="off" disabled="" style="background-image: url("https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png");"></div><div style="float:left; width:35%;"><input type="button" id="cs_gmaps_search_btn" class="button cs-gmaps-btn cs_gmaps_search_btn" data-map-id="_cspm_location" style="margin-right:0.5em;" value="Search"><button id="cs_gmaps_geoloc_btn" class="button cs-gmaps-btn cs_gmaps_geoloc_btn" data-map-id="_cspm_location" title="Find your position"><img src="https://stg.iidkhal.com/wp-content/plugins/codespacing-progress-map/admin/libs/metabox-cs-gmaps/target.svg"></button></div><div style="clear:both;"></div></div><div id="cs_gmaps__cspm_location" class="cs-gmaps-map" data-map-id="_cspm_location" style="height: 250px; width: 100%; position: relative; overflow: hidden;"><div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-err-container"><div class="gm-err-content"><div class="gm-err-icon"><img src="https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png" alt="" draggable="false" style="user-select: none;"></div><div class="gm-err-title">Ошибка</div><div class="gm-err-message">При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.</div></div></div></div></div><div><div style="width:30%; float:left; margin-right:1.5em"><label for="" class="cs-gmaps-label">Latitude</label><input type="text" class="cs-gmaps-latitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lat]" id="_cspm_location[codespacing_progress_map_lat]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0"></div><div style="width:30%; float:left; margin-right:1em"><label for="" class="cs-gmaps-label">Longitude</label><input type="text" class="cs-gmaps-longitude cs-gmaps-preventDefault" name="_cspm_location[codespacing_progress_map_lng]" id="_cspm_location[codespacing_progress_map_lng]" value="" data-map-id="_cspm_location" data-hash="4ugg7riv46c0"></div><div style="width:30%; float:right; margin-top:23px;"><input type="button" id="cs_gmaps_get_pinpoint" class="button cs-gmaps-btn cs_gmaps_get_pinpoint" data-map-id="_cspm_location" value="Get pinpoint"></div><div style="clear:both;"></div></div><p class="cmb2-metabox-description"></p></div>
</div>
</div><div class="cmb-row cmb-type-title cmb2-id--cspm-image-gallery" data-fieldtype="title">
<div class="cmb-td">
<h5 class="cmb2-metabox-title" id="-cspm-image-gallery" data-hash="7srot5dtvc50" style="font-size:20px; color:#008fed; font-weight:400;">Attachments</h5>
</div>
</div><div class="cmb-row cmb-type-cs-file cmb2-id-upload-video" data-fieldtype="cs_file">
<div class="cmb-th">
<label for="upload_video">Upload video</label>
</div>
<div class="cmb-td">
<div class="cs_file_input_container"><div class="cs_open_browser" id="upload_video">Select or Drag a file</div><input type="file" name="upload_video" id="upload_video" class="cs_file_input" accept="video/x-ms-asf,video/x-ms-wmv,video/x-ms-wmx,video/x-ms-wm,video/avi,video/divx,video/x-flv,video/quicktime,video/mpeg,video/mp4,video/ogg,video/webm,video/x-matroska" data-max-files="1" data-max-upload-size="67108864" style="visibility: hidden; height: 0px;"><input type="hidden" name="upload_video_id" id="upload_video_id" class="cs_file_id" data-multiple="" value=""></div><div class="cs_files_preview_area" id="upload_video"></div><p class="cmb2-metabox-description" style="margin-top:10px;">Upload a video from your device</p>
</div>
</div><div class="cmb-row cmb-type-text cmb2-id--cspm-form-ID table-layout" data-fieldtype="text">
<div class="cmb-td">
<input type="text" class="regular-text" name="_cspm_form_ID" id="_cspm_form_ID" value="" data-hash="1258655ht300" placeholder="Dont't fill this field. Leave it empty!">
</div>
</div></div></div><input type="hidden" class="cmb2-hidden" name="_cspm_can_user_submit" id="_cspm_can_user_submit" value="1" data-hash="7d4tpukmdfl0">
<!-- End CMB2 Fields -->
<input type="submit" name="cspmsl_submit_btn_map10" value="Submit location" class="button-primary cspm_bg_rgb_hover" data-map-id="map10">
<input type="button" name="cspmsl_cancel_btn_map10" value="Cancel" class="button-primary" data-map-id="map10">
</form>