Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to show all options from an HTML Select form field at once without clicking it?

I am using the X-Editable jQuery edit in place library for a Task Status selection field. All it;s stages are shown below from the process of:

  1. Clicking the Status
  2. It then hides the status SPAN and reveals the hidden Selection field.
  3. You can click the selection field which makes it dropdown and show all available options.
  4. Clicking a new Selection option value then shows a loading spinner image while it makes an AJAX request to save the value
  5. It then Shows the new selected Status Value SPAN.
  6. Clicking again restarts the cycle/process.

enter image description here


I am however trying to come up with a better way to select a new value. There are only 3 selection options so I would like to possibly show all 3 items at once instead of requiring you to click the dropdown to see the other 2 options.

Is it possible to do that with a basic Selection or does it require a Multi-select field?

like image 974
JasonDavis Avatar asked Jun 23 '15 18:06

JasonDavis


People also ask

How do you select all options in HTML?

Definition and Usage For windows: Hold down the control (ctrl) button to select multiple options. For Mac: Hold down the command button to select multiple options.

How do I select multiple options from a drop-down list in HTML?

To select multiple items, the user has to hold down the shift or ctrl key, then select with the mouse.

Which option in HTML forms helps to select the multiple options in a group?

The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required , disabled , autofocus , etc.


1 Answers

http://jsfiddle.net/n1k5cLx0/

Are you looking for a list or do you still want a dropdown with the options shown as default. For a list style you could use the size attribute with the select element.

HTML

<select size="3">
  <option>Not Started</option>
  <option selected>In Progess</option>
  <option>Completed</option>
</select>

CSS

select{
    overflow:auto;
}
like image 195
Sean Wessell Avatar answered Oct 11 '22 11:10

Sean Wessell