Jump to content

Title for a dropdown


phppup

Recommended Posts

This will give me a dropdown menu

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

and by default, the first choice, Volvo, will be visible to the user.

This will let me categorize the menu for the user

<select name="cars" id="cars">
  <option value="" >Car choices</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

but the user CAN select the "Car choices" as an option.

Using an <optgroup> tag gets me CLOSER, but it is NOT visible until after the user clicks the drop-down.

How can I create a visible category title that is not selectable in my drop-down?

Link to comment
Share on other sites

As you have it now but make the <select> required (to force a values other than "")

<select name="cars" id="cars" required>
  <option value="" >Car choices</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

 

Link to comment
Share on other sites

This is what I've done in the past, but it still allowed the NULL category to be a viable option (especially on a mobile device).

I want something similar to an <optgroup> that is viewable prior to closing the drop-down.

Link to comment
Share on other sites

So you want the user to see "Volvo" as the option, but have something in there that shows "Car choices" alongside it?
Use an optgroup, then add some Javascript to copy the selected option's parent optgroup label to some other element that's useful.

Or go with a fancy dropdown element/library.

Link to comment
Share on other sites

No, I don't @requinix

I want someone that looks at the form to see the drop-down apparatus with the phrase "Car choices" (similar to a text field placeholder).

it can be visible once the menu drops open, but should NOT be selectable (like an optgroup).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.