Select with blank options in web mobile phone

[pereiragtiago]

http://intervencoescc.infy.uk/login.php

Error Message

In web mobile phone the select element has blank options which it doesn’t suppose to have. In web pc works correctly. i add two images, one of phone and the other from pc

[Frank419]

Well, it’s your fault:

You shouldn’t have relied on display:none on options which won’t work on iOS devices.

[Admin]

Yes, I don’t think having options in the list that are hidden with CSS rules is really how you’re supposed to do things. And it might be that different browsers handle that in different ways.

If you don’t want to show some options, just leave the option elements out entirely. It’s a PHP page after all, so it should be possible to just not have the element in the HTML output.

[pereiragtiago]

was my fault, i had some errors in the code. thanks, but it keeps to show an blank option in the mobile phone at the start, and in the pc works fine. what i trying to achieve is the select is loaded in the first time to not select an option automatically, it needs the user to select himself, if he tries to access with wrong password the option selected goes to the “$slt_user” for when the pages reloads again it doesnt need to select the same option again.

<select name="user_box" class="input_login"  id = "input_name" required>
    <?php
                        $u_q = "select id, name from users where active is true order by name ASC;";
                        $users = $main_c -> select_db($u_q);
                        if ($slt_user == "")
                            echo"<option style=display:none></option>";
                        $op_mode = "";
                        for ($i = 0; $i < count($users); $i++)
                        {
                            if ($slt_user != "")
                                $op_mode = ($slt_user == $users[$i]['id']) ? "selected":"";

                            echo "<option value = '" . $users[$i]['id'] . "' $op_mode>". $users[$i]['name']. "</option>";
                        }   
?>                                    
</select>

[Admin]

@pereiragtiago

but it keeps to show an blank option in the mobile phone at the start, and in the pc works fine. what i trying to achieve is the select is loaded in the first time to not select an option automatically

The blank options is because of the options with the display:none CSS. Apparently iOS doesn’t support it, and any option in a select box will be shown and any CSS is ignored. So please just get rid of those hidden options, because that’s just not going to work.

Having a select box without an option selected is just not how select boxes work I think. By default, select boxes will either show the option that’s specifically marked as selected, and if no option is marked, it will pre-select the first option in the list. There is no way around that without having a completely custom select box implementation (the select2 library comes to mind).

---

What I do in the client area when I want to make people choose a specific option, I add a dummy option with a help text to the top of the list like this:

<option value="">Please select an option</option>
<option value="first">First Option</option>
<option value="second">Second Option</option>
...

You can then setup validation, either in the browser with Javascript or on the server so that if someone doesn’t select an option, an error is shown.

The first option is still shown as a selection, which is impossible to avoid, but at least it’s clear that it’s not an option you can choose.

[Greenreader9]

@Admin

<option value="">Please select an option</option>
<option value="first">First Option</option>
<option value="second">Second Option</option>
...

…

The first option is still shown as a selection, which is impossible to avoid, but at least it’s clear that it’s not an option you can choose.

Adding to this, you can add the “disabled” attribute to the default “option” value to prevent it from being re-selected (And depending on your form setup, prevent the form from being submitted).

Like:

<option value="" disabled>Please select an option</option>
<option value="first">First Option</option>
<option value="second">Second Option</option>
...