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> 

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>

//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' );

Solution:

i found the answer my self. i change the js script function name window.onload, so now i open my post edit, js script automatic running

window.CountryChange    = function ()
// change to on load
window.onload = function ()

also change the select function name

<select name="countryId" id="countryId" onchange="window.CountryChange()" >

// change to the js function name

<select name="mpcf-countryid" id="mpcf-countryid" onchange="window.onload()" >

set default select value get postmeta to js dropdown

 <select name="mpcf-stateid" id="mpcf-stateid" >
      <?php
$_value1 = trim( get_post_meta( get_the_ID(), 'mpcf-stateid', true) );
                        foreach ( array(
                           $_value1 => $_value1 
                            ) as $value1 => $label1 ) :
                            $selected1 = selected( $value1, $_value1, false );
                            
                            
                    ?>
                        <option value="<?php echo esc_attr( $value1 ); ?>"<?php echo $selected1; ?>><?php echo esc_html( $label1 ); ?></option>
                    <?php endforeach;  ?>
  </select>