1

I am working in a Drop Down List of WordPress. "Selected" attribute is not working. My code is like below

     <select class="form-control" name="division">
        <option value="Select">
            <?php esc_html_e( '-----Select-----', 'donate' ); ?>
        </option>
        <?php 
            $selected_division = get_user_meta( $userID, 'donor_division', true ); 
            $divisions = donate_division();
            $options = '';
            foreach( $divisions as $division ){                                             
              if( $selected_division == $division ){                                                
                    $selected = 'selected';
              }else{
                    $selected = '';
              }                                             
                $options .= '<option value="'.esc_attr( $division ).'" '.esc_attr( $selected ).'>'.esc_html( $division ).'</option>';
                }
                echo $options;
            ?>
        </select>

But I am getting out put like below. What is the wrong in the code ?

enter image description here

  • 2
    did you inspect the actual html code or view the source code? Is it doing output? It could be a couple of reasons such as invalid html output but cannot be rendered or you may try to do a foreach to output the text first. – simongcc Apr 4 at 4:03
  • @simongcc. Yes, I inspected the actual html code. Please check i.stack.imgur.com/klmT7.png – Foysal Apr 4 at 5:14
  • 1
    You may try to change the selected instead of selected="" – simongcc Apr 4 at 6:05
  • 1
    Or you may try selected="selected" you may refer to MDN Option. In Chrome, if you set it as selected="", it will be updated to selected instead. Maybe your browser did not update it. I have tried in Firefox however, your settings seems work. And I refer to WordPress codes, it use selected="selected", so it should be cross browser compliant. – simongcc Apr 4 at 6:31
  • 1
    Could be a JavaScript un-selecting the selected option. Try checking for such script/code. – Sally CJ Apr 4 at 9:03
1

Your code looks alright. Because your selected output at right place in your screenshot. I have tried to reproduce the problem but seems all browsers are working correctly. Maybe you could just create a very simple template without other code to interfere. Sometimes, a broken HTML structure may also affect. I tested it both in a WP free html and in my theme by putting it at the bottom of my theme. You may test the following:

  1. disable all plugins
  2. change to basic theme like 2020 default theme
  3. add your code to the bottom of functions.php for a quick test
  4. test your page in different browsers
  5. you may also print_r() your $selected_division to make sure it is what you want but I think it should be right since the "selected" seems placed in place. Just in case.
  6. you may disable browser javascript by extension OR you may test in an incognito mode to avoid interfernce by extensions/addons which could happen sometimes.
  7. you may break it part of part like using a static page to make sure it works in a simple form. And then add php to generate and then add JS to control. Doing so could help sorting out the exact problem.

This ensures the theme is free from other interference from plugins or broken structure.

I have tried your code except that I put finite information for test. The selection box works fine in Firefox, Chrome, Safari under MacOS 10.12 For your reference:

<select class="form-control" name="division">
<option value="Select">
    <?php esc_html_e( '-----Select-----', 'donate' ); ?>
</option>
<?php 
     // $selected_division = get_user_meta( $userID, 'donor_division', true ); 

     $selected_division = 'Barisal';

    // just keep your own variables, it is just an example because I have no idea what yours is
    $divisions = array(
        'Barisal',
        'Chattogram',
        'Dhaka',
        'Khulna',
        'Rajshanhi',
        'Rangpur',
        'Sylhet',
    );

    $options = '';

    foreach( $divisions as $division ){  

        if( strtolower( $selected_division ) == strtolower( $division ) ){                                                
            $selected = 'selected="selected"';
        }else{
            $selected = '';
        }                                             
        $options .= '<option value="'.esc_attr( $division ).'" '.esc_attr( $selected ).'>'.esc_html( $division ).'</option>';
        }
        echo $options;
    ?>
</select>

Firefox evergreen Safari 12.1.2 (12607.3.10) Chrome 80.0.3987.149 (Official Build) (64-bit)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.