显示保存的下拉值而不是占位符

Question

HTML to render field:

<p class="form-row form-row-wide">
                <label for="reg_diocese">Diocese</label>
                <select type="text" class="input-text" name="diocese" id="diocese" value="<?php echo esc_attr( $user->diocese ); ?>" class="regular-text" />
                     <option value="<?php echo esc_attr( $user->diocese ); ?>"><?php echo esc_attr( $user->diocese ); ?></option>   
 </select>
                </p>

Updated -->The above code is shown on the register form, which saves the selected diocese value from the drop down as new user meta within the user table.

Js :

   var jsonData = {
  "Table": [{
      "diocese": "Aberdeen & Orkney"
      }, {
          "diocese": "Armagh"
      }, {
          "diocese": "Bangor"
      }, {
          "diocese": "Bath & Wells"
      }, {
          "diocese": "Birmingham"
      }, {



  }]
  };



     var listItems = '<option selected="selected" value="0">Select</option>';

  for (var i = 0; i < jsonData.Table.length; i++) {
         listItems += "<option value='" + jsonData.Table[i].diocese + "'>" + jsonData.Table[i].diocese + "</option>";
     }

     $("#diocese").html(listItems);

edit-account.php:

        <p class="form-row form-row-wide">
            <label for="reg_diocese">Diocese</label>
            <select onchange="<?php echo esc_attr( $user->diocese ); ?>" type="text" class="input-text" name="diocese" id="diocese" value="<?php echo esc_attr( $user->diocese ); ?>" class="regular-text" />
                 <option value="<?php echo esc_attr( $user->diocese ); ?>"><?php echo esc_attr( $user->diocese ); ?></option>
            </select>
            </p>

Updated --> The user has the option to edit their registration options, all the standard text fields are showing the value brought forward by the database but the select field isn't showing the selected value it's instead showing 'Select' which is set in the js...

So the value is currently select within the form and saved to the database via user meta and which allows me to show it across the site on the front end.

The issue is the placeholder of the select field is shown within edit-form.php where I actually want the value that the user has selected to show.

If I inspect the field, the value has actually updated to my selection, just the placeholder is not changing...

Thanks, Dan

Answer 1

You should adapt your code with Select2 . You can set value with jQuery lazily.

$("#id").val("Some choice");