Leff
Leff

Reputation: 1320

How to make default option in select input in Wordpress?

I am making custom fields for users in admin panel like this:

function additional_profile_fields( $user ) {

      $departments = get_terms(['taxonomy' => 'department', 'hide_empty' => false]);
      $userDepartment = get_the_author_meta( 'department', $user->ID );
      $regions = get_terms(['taxonomy' => 'region', 'hide_empty' => false]);
      $userRegion = get_the_author_meta( 'region', $user->ID );
      $industries = get_terms(['taxonomy' => 'industry', 'hide_empty' => false]);
      $userIndustry = get_the_author_meta( 'industry', $user->ID );
      $companies = get_terms(['taxonomy' => 'company', 'hide_empty' => false]);
      $userCompany = get_the_author_meta( 'company', $user->ID );

      ?>
      <h3>Extra profile information</h3>
      <table class="form-table">
       <tr>
         <th><label for="department">Avdeling</label></th>
         <td>
           <select id="department" name="department"><?php
             foreach ( $departments as $department ) {
               printf( '<option value="%1$s" %2$s>%1$s</option>', $department->name, selected( $userDepartment, $department->name, false ) );
             }
           ?></select>
         </td>
       </tr>
      </table>
      <table class="form-table">
       <tr>
         <th><label for="region">Region</label></th>
         <td>
           <select id="region" name="region"><?php
             foreach ( $regions as $region ) {
               printf( '<option value="%1$s" %2$s>%1$s</option>', $region->name, selected( $userRegion, $region->name, false ) );
             }
           ?></select>
         </td>
       </tr>
      </table>
      <table class="form-table">
       <tr>
         <th><label for="industry">Bransje</label></th>
         <td>
           <select id="industry" name="industry"><?php
             foreach ( $industries as $industry ) {
               printf( '<option value="%1$s" %2$s>%1$s</option>', $industry->name, selected( $userIndustry, $industry->name, false ) );
             }
           ?></select>
         </td>
       </tr>
      </table>
      <table class="form-table">
       <tr>
         <th><label for="company">Selskap</label></th>
         <td>
           <select id="company" name="company"><?php
             foreach ( $companies as $company ) {
               printf( '<option value="%1$s" %2$s>%1$s</option>', $company->name, selected( $userCompany, $company->name, false ) );
             }
           ?></select>
         </td>
       </tr>
      </table>
      <?php
  }

  add_action('user_new_form', 'additional_profile_fields');
  add_action('edit_user_profile', 'tm_additional_profile_fields');
  add_action('show_user_profile', 'tm_additional_profile_fields');

This works fine, but this gives me always as a default first option from any array that I am looping through, but I would like to present a default option field like placeholder if the user doesn't have anything in the DB for that field. How can I do that?

Upvotes: 0

Views: 1789

Answers (2)

Adam Taylor
Adam Taylor

Reputation: 162

You can add a blank <option> as the first element in the list as placeholder style text.

If you place selected="selected" and disabled="disabled" attributes on it, it will be selected by default and the user will not be able to choose it once they have changed it.

The full element would look like this:

<option value="" selected="selected" disabled="disabled">Choose an option&hellip;</option>

For your specific example:

    function additional_profile_fields( $user ) {

          $departments = get_terms(['taxonomy' => 'department', 'hide_empty' => false]);
          $userDepartment = get_the_author_meta( 'department', $user->ID );
          $regions = get_terms(['taxonomy' => 'region', 'hide_empty' => false]);
          $userRegion = get_the_author_meta( 'region', $user->ID );
          $industries = get_terms(['taxonomy' => 'industry', 'hide_empty' => false]);
          $userIndustry = get_the_author_meta( 'industry', $user->ID );
          $companies = get_terms(['taxonomy' => 'company', 'hide_empty' => false]);
          $userCompany = get_the_author_meta( 'company', $user->ID );

          ?>
          <h3>Extra profile information</h3>
          <table class="form-table">
           <tr>
             <th><label for="department">Avdeling</label></th>
             <td>
               <select id="department" name="department">
                 <option value="" selected="selected" disabled="disabled">Choose an option&hellip;</option>
                 <?php
                   foreach ( $departments as $department ) {
                     printf( '<option value="%1$s" %2$s>%1$s</option>', $department->name, selected( $userDepartment, $department->name, false ) );
                   }
               ?></select>
             </td>
           </tr>
          </table>
          <table class="form-table">
           <tr>
             <th><label for="region">Region</label></th>
             <td>
               <select id="region" name="region">
                 <option value="" selected="selected" disabled="disabled">Choose an option&hellip;</option>
                    <?php
                     foreach ( $regions as $region ) {
                       printf( '<option value="%1$s" %2$s>%1$s</option>', $region->name, selected( $userRegion, $region->name, false ) );
                     }
               ?></select>
             </td>
           </tr>
          </table>
          <table class="form-table">
           <tr>
             <th><label for="industry">Bransje</label></th>
             <td>
               <select id="industry" name="industry">
                 <option value="" selected="selected" disabled="disabled">Choose an option&hellip;</option>
                 <?php
                     foreach ( $industries as $industry ) {
                       printf( '<option value="%1$s" %2$s>%1$s</option>', $industry->name, selected( $userIndustry, $industry->name, false ) );
                     }
               ?></select>
             </td>
           </tr>
          </table>
          <table class="form-table">
           <tr>
             <th><label for="company">Selskap</label></th>
             <td>
               <select id="company" name="company">
                 <option value="" selected="selected" disabled="disabled">Choose an option&hellip;</option>
                 <?php
                     foreach ( $companies as $company ) {
                       printf( '<option value="%1$s" %2$s>%1$s</option>', $company->name, selected( $userCompany, $company->name, false ) );
                     }
               ?></select>
             </td>
           </tr>
          </table>
          <?php
      }

      add_action('user_new_form', 'additional_profile_fields');
      add_action('edit_user_profile', 'tm_additional_profile_fields');
      add_action('show_user_profile', 'tm_additional_profile_fields');

Upvotes: 1

Ole Haugset
Ole Haugset

Reputation: 3797

If you want to show a "please select a value" this option, if none of the options are selected. You can use the following code:

Simply place it as the first option-child of your select, before your foreach code.

<option value="" disabled selected>Select your option</option>

Upvotes: 0

Related Questions