javascript - how to show selected options drop down menu values in attributes field in after saving post.php

i create custom field for select list country and state using foreach. but the value not displaying in the attribute filed in post.php

<select name="countryId" id="countryId" onchange="window.CountryChange()" >
        <?php
$_value = trim( get_post_meta( get_the_ID(), 'countryId', true) );
                        foreach ( array(
                            '0' => 'Select Country',
                            'United States' => 'United States',
                            'Canada' => 'Canada',
                            ) as $value => $label ) :
                            $selected = selected( $value, $_value, false );
                    ?>
                        <option value="<?php echo esc_attr( $value ); ?>"<?php echo $selected; ?>><?php echo esc_html( $label ); ?></option>
                    <?php endforeach; ?>
</select>
<div id="stateField" style="display:none">
  <label id="stateLabel">State:</label>
  <select name="stateId" id="stateId">

//js var inside this area what can i change this area 

  </select>
</div> 
Copy code

i create county options in php. the field value is successfully update in the post meta field and the value displaying in the attribute filed. but the state field create with java script. how to put or modifying the code display the meta value in the attribute fields in wordpress. after saving the post only showing country fields. state field meta is update but the attribute filed is hiding.

<script>
window.CountryChange = function () {
      var countryState = [
        [
          'United States', [
            ['', 'State/Province'],
            ['AL', 'Alabama'],
            ['AK', 'Alaska'],
            ['AZ', 'Arizona'],
            ['AR', 'Arkansas'],
          ],
        ],
        [
          'Canada', [
            ['', 'State/Province'],
            ['AB', 'Alberta'],
            ['BC', 'British Columbia'],
            ['MB', 'Manitoba'],
            ['NB', 'New Brunswick'],
          ]
        ]
      ];

      var countryElement = document.getElementById('countryId');
      var stateElement = document.getElementById('stateId');
      var stateLabelElement = document.getElementById('stateLabel');
      var stateFieldElement = document.getElementById('stateField');

      if (countryElement && stateElement) {
        var listOfState = [
          ['XX', 'None']
        ];

        var currentCountry = countryElement.options[countryElement.selectedIndex].value;
        for (var i = 0; i < countryState.length; i++) {
          if (currentCountry == countryState[i][0]) {
            listOfState = countryState[i][1];
          }
        }

        if (listOfState.length < 2) {
          stateFieldElement.style.display = "none";
        } else {
          stateFieldElement.style.display = "inline-block";
        }
        var selectedState;
        for (var i = 0; i < stateElement.length; i++) {
          if (stateElement.options[i].selected === true) {
            selectedState = stateElement.options[i].value;
          }
        }
        stateElement.options.length = 0;
        for (var i = 0; i < listOfState.length; i++) {
          stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
          if (listOfState[i][0] == selectedState) {
            stateElement.options[i].selected = true;
          }
        }
      }
    }
</script>
Copy code

//update post meta

function mpcf_save_meta_box( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( $parent_id = wp_is_post_revision( $post_id ) ) {
        $post_id = $parent_id;
    }
    $fields = [ 
        'countryId',
        'stateId',

 ];
    foreach ( $fields as $field ) {
        if ( array_key_exists( $field, $_POST ) ) {
            update_post_meta( $post_id, $field, sanitize_text_field( $_POST[$field] ) );
        }
     }
}
add_action( 'save_post', 'mpcf_save_meta_box' );
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.