echo selected value from dropdown

Question

This is for a custom type post, I have a custom field (a drop-down list) when I select an option in the dropdown let's say "DesignApplication" and save the post.

Then when I try to update the post later, I find "GameApplication" selected by default which is the first option in the list.

It doesn't retrieve the selected saved option, I searched on Google and tried to fix myself but to no avail.

esc_attr( $j_applicationCategory ) doesn't work it returns "GameApplication".

Here is the code I'm using:

add_action( 'add_meta_boxes', 'progs_add_meta_box' );
function progs_meta_box_callback( $post ) {
    wp_nonce_field( 'progs_meta_box', 'progs_meta_box_nonce' );
    
    
    $j_applicationCategory = get_post_meta( $post->ID, '_j_applicationCategory', true );
    
    echo '<p><label for="j_applicationCategory">' . __('Application Category', 'the220px') . '</label>';
    echo '<select id="j_applicationCategory" name="j_applicationCategory" value="' . esc_attr( $j_applicationCategory ) . '" style="width: 100%" />';
    echo '<option value="GameApplication">GameApplication</option>';
    echo '<option value="UtilitiesApplication">UtilitiesApplication</option>';
    echo '<option value="DesignApplication">DesignApplication</option>';
    echo '<option value="ReferenceApplication">ReferenceApplication</option>';
    echo '</select>';
    echo '</p>';    
    
}


function progs_save_meta_box_data( $post_id ) {
    if ( ! isset( $_POST['progs_meta_box_nonce'] ) ) {
        return;
    }
    if ( ! wp_verify_nonce( $_POST['progs_meta_box_nonce'], 'progs_meta_box' ) ) {
        return;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    if ( isset( $_POST['post_type'] ) && 'progs' == $_POST['post_type'] ) {
        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }
    } else {
        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return;
        }
    }
    
    if ( ! isset( $_POST['j_applicationCategory'] ) ) {
        return;
    }
    
    $j_applicationCategory = sanitize_text_field( $_POST['j_applicationCategory'] );

    update_post_meta( $post_id, '_j_applicationCategory', $j_applicationCategory );

}

Answer 1

This is purely an HTML issue. The problem is that you've tried to indicate the selected item by setting a value="" attribute on the <select> element. That's not how <select> works.

To mark an option as selected by default the <option> tag needs to be given the selected attribute.

For example, you are outputting this:

<select id="j_applicationCategory" name="j_applicationCategory" value="UtilitiesApplication" style="width: 100%" />
    <option value="GameApplication">GameApplication</option>
    <option value="UtilitiesApplication">UtilitiesApplication</option>
    <option value="DesignApplication">DesignApplication</option>
    <option value="ReferenceApplication">ReferenceApplication</option>
</select>

You need to output this:

<select id="j_applicationCategory" name="j_applicationCategory" style="width: 100%">
    <option value="GameApplication">GameApplication</option>
    <option value="UtilitiesApplication" selected>UtilitiesApplication</option>
    <option value="DesignApplication">DesignApplication</option>
    <option value="ReferenceApplication">ReferenceApplication</option>
</select>

Also note that I have removed an inappropriate closing / from the select tag.

WordPress has a utility function, selected(), that makes outputting this attribute based on the current value easier:

echo '<select id="j_applicationCategory" name="j_applicationCategory" style="width: 100%">';
echo '<option value="GameApplication" ' . selected( $j_applicationCategory, 'GameApplication', false ) . '>GameApplication</option>';
echo '<option value="UtilitiesApplication" ' . selected( $j_applicationCategory, 'UtilitiesApplication', false ) . '>UtilitiesApplication</option>';
echo '<option value="DesignApplication" ' . selected( $j_applicationCategory, 'DesignApplication', false ) . '>DesignApplication</option>';
echo '<option value="ReferenceApplication" ' . selected( $j_applicationCategory, 'ReferenceApplication', false ) . '>ReferenceApplication</option>';
echo '</select>';