jQuery SELECT placeholder with default selected option

Topic: jQuery SELECT placeholder with default selected option

lccderek priority asked 2 years ago

I need to have a SELECT dropdown with a placeholder when there is no option selected, while it may also have one of the option default selected (set with php, get value from db and set as selected if is the same value as the option), and a js function is called at the start and need to get the value(.val()) of the selected option.

Expected behavior Placeholder for SELECT is show and selected only if there is no selected option. And the js function should get the selected option's value:

- If there is no default selected option, the placeholder should be shown and js function should get the value of "".
- If there is a default selected option, the placeholder should be hidden and the dropdown should show the default selected option (same as a normal selected option), and js function should get the value of the selected option.

Actual behavior When there is an option default selected, the placeholder's value is changed to the default selected option's value. The default selected option is shown in the dropdown with the style of the placeholder, and the js function returned the value of the select is "".

Resources (screenshots, code snippets etc.) Please find below snippet: https://mdbootstrap.com/snippets/jquery/lccderek/4139430

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

I added this to our to-do list. At the moment, the only thing I can suggest is to set the text that will suggest that you should choose something

Add comment

lccderek priority answered 2 years ago

0 0 Best answer

<p>Thanks for the propose solution.From my understanding of viewing the snippet you provide, you added a disabled option as the "placeholder" and hide it with css. However, I don't think this solve one of the main reasons I want a placeholder, in your snippet the second
dropdown (with the disabled option "placeholder" selected), the dropdown would still shown as like it have already have an option selected.</p>

<p>One of the main reason why I want to have a placeholder for my select, is since I have a page of multiple select dropdown that may (or may not) need the user to select an option (so may not require), and I want the users to know which dropdown they have filled even at a glance.
And with "data-placeholder" with the select, from what I can see, it acts similar with normal text box, the placeholder's styling is different from an inputted value (greyed out), which is what I want.</p>

<p>I understand that I can set the text for the disabled option(act as "placeholder") with a more recognisable text for a not yet selected dropdown. However, many of my dropdown's text is with a string with many characters, and from the user's standpoint, viewing a page with multiple/many dropdown list of many strings of options, it will be hard to differentiate which option is not selected.</p>

<pre class="prettyprint"><code><select>
    <option value="" disabled selected>Please select option</option>
    <option value="1-2">Option with a long text</option>
    <option value="3-4">Another one with text</option>
    <option value="5-6">1234</option>
    <option value="5-6">I do not know</option>
</select>
</code></pre>

Please insert min. 20 characters.

Thanks for the propose solution.From my understanding of viewing the snippet you provide, you added a disabled option as the "placeholder" and hide it with css. However, I don't think this solve one of the main reasons I want a placeholder, in your snippet the second dropdown (with the disabled option "placeholder" selected), the dropdown would still shown as like it have already have an option selected.

One of the main reason why I want to have a placeholder for my select, is since I have a page of multiple select dropdown that may (or may not) need the user to select an option (so may not require), and I want the users to know which dropdown they have filled even at a glance. And with "data-placeholder" with the select, from what I can see, it acts similar with normal text box, the placeholder's styling is different from an inputted value (greyed out), which is what I want.

I understand that I can set the text for the disabled option(act as "placeholder") with a more recognisable text for a not yet selected dropdown. However, many of my dropdown's text is with a string with many characters, and from the user's standpoint, viewing a page with multiple/many dropdown list of many strings of options, it will be hard to differentiate which option is not selected.

<select>
    <option value="" disabled selected>Please select option</option>
    <option value="1-2">Option with a long text</option>
    <option value="3-4">Another one with text</option>
    <option value="5-6">1234</option>
    <option value="5-6">I do not know</option>
</select>

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

How about this solution? https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/4145585#html-tab-view

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Unfortunately this is not possible. When creating MDB Select, we tried to make it consistent with the native m select. The native select does not include the possibility that no option will be selected.

lccderek priority commented 2 years ago

But the problem is that I already have one of the option selected. Even if I add a blank option (option with no value and disabled), selected if I do not have a default select option. The issue still exits. I have updated in the snippet.

lccderek priority commented 2 years ago

Or could there be any workaround for adding a "placeholder" for a select when there is no option selected. I can add an option with no value and disable it and select when no default option is set. However, the main reason I need a "placeholder" is that the styling of the selected "blank option" is the same as other options, making the user think that the dropdown have already been filled.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB jQuery
MDB Version: MDB4 4.20.0
Device: MacBook Pro (13-inch, 2020)
Browser: Google Chrome 103.0.5060.53
OS: macOS Big Sur v11.2.3(20D91)
Provided sample code: No
Provided link: Yes

lccderek

15Support score
1Questions 1Answers 0Snippets