I can't find a way to block one option from select list.
For example I have on page:
<select name="test_select">
<option value="1">Something I don't need</option>
<option value="2">Something I still need</option>
</select>
I use filter ##option[value="1"]
So.. seems that filter don't block initial state of select. After page loaded default value "I don't need" still displayed.
When I'm trying to select another option(s) - the first option disappear from the list which is fine, but still problem for me that initially unneeded option shown after page loaded.
Is there a way to block(remove) this option completely?
The filter works as expected because it's supposed to hide the <option> element, not the <select> element. If you want to hide the <select> element but only if it has a certain value, you'd need to wait for parent selectors to (hopefully) arrive with CSS4. Those would allow you to write the filter as
##!select > option[value="1"]:checked (based on the syntax in the W3C working draft)
##select:has(> option[value="1"]:checked) (based on the syntax in the CSSWG editor's draft)
Related
I must be doing something very stupid.
Whatever I tried I always get an empty select.
This is the code:
<select>
<option disabled="">jknjk</option>
<option selected value="local"> Со склаа</option>
<option value="preorder"> Предзаказ</option>
</select>
I swear I used select elements before and never had problems with it.
But I have no ideas why it works so in this case when it shouldn't.
If I click it one time after loadiing - it can be used.
As one can see it has selected value (in inspector)
Could it be some CSS what makes it behave so?
Full image
Full css styles attached to select element
This appears to be a Chrome bug, discussed on this question and this question. A work-around solution is to apparently set 'autocomplete="off"' on the form. Perhaps keep an eye on the status of the bug report that was filed in the second link, to see the bug fixed or find a permanent solution.
What I have in my code right now:
<select>
<option value="...">Dr. Steve 555-222-9393</option>
<option value="...">Jim 333-999-1111</option>
<option value="...">New Emergency Services 0118-999-881-99-9119-7253</option>
</select>
It looks bad, and after a few dozen entries it's very, very hard to read.
What I'd like is to emulate a dropdown by using a table and then displaying just one row of the table at a time (with the currently selected row's value stored in a hidden input).
The question: before I start writing it myself, has someone already done this (in any library)? I've been going through the jquery plugin registry and there are plenty of plugins for converting <ul> to behave like <select> and tons to create fancy multi-selects. (Some of these might even work, if you could disable the multi- part. SE's own Tags input has pretty fancy formatting in its "dropdown".) But if there's one that can turn a <table> (or anything else) into a select-with-columns, it's lost in the noise.
Note: I've found a number of related posts that suggest using monospace fonts and padding to line data up in a plain select tag, but I'd like to think it can be done better, especially after seeing jquery plugins like Chosen.
I wasn't able to find anything that could convert a table to a dropdown with columns but I was able to use SelectBoxIt's data-text attribute to fake it with inline-block:
<select>
<option value="1" data-search="555-555-5555 Bob" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">555-555-5555</span><span style="display:inline-block;">Bob</span>"></option>
<option value="2" data-search="444-444-4444 Steve" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">444-444-4444</span><span style="display:inline-block;">Steve</span>"></option>
</select>
data-search is required in order for type-to-search to work (otherwise, it appears to expect the user to type the HTML as it appears in data-text). More work would be needed to make the columns line up if someone really entered a phone number like 0118-999-881-99-9119-7253.
I have a select box.
When no value is selected, I have the empty option --. It's OK !
Once an option is selected, the empty option disappears.
But I would like that it is always there to have the opportunity to choose --.
Is it possible ?
<select ng-model="project" ng-options="act.id as act.name for act in actors"></select>
please see here:http://plnkr.co/edit/SWpRZA1dafNNva70z6KE?p=preview
<select ng-model="project" ng-options="act.id as act.name for act in actors">
<option value="">--<option>
</select>
ng-options gets priority when any option is selected from .
As per the standard html can contain . Thus the mentioned option gets priority as the selection is null.
And in view, html priority is higher, thus always value is seen unless the ng-option value already selected from controller.
I'm making a dojo widget that parses a <select> object along with its <options> and creates a facade select object out of other elements with accessibility and such and a hidden select element. While trying to figure out how to be able to prevent a user from being able to use an <option> without a value, I attempted to try to utilize some facets from this question which says to add an option with an empty string value and make it selected and disabled.
That's all well and good, but the user is still able to submit the form if the "placeholder" option is still selected. To fix this, I made the <select> required so that the user would have to pick an option.
Now, in Firefox, trying to submit this form without choosing a different option pops up the tooltip on the select saying "Please select an item in the list". In Chrome though, the form submits just fine with no warning. IE11 is the same as Chrome, Opera as well.
Considering 3 out of the 4 browsers I tested in, the form ignores the required is it safe to say that that in this case, the requirement is a gray area or is Firefox the only one implementing this correctly? Either way, I'm going to need to find another way to get this to work.
HTML
<form action="#" method="get">
<select name="sel" required>
<option disabled selected>Hello</option>
<option value="1">World</option>
<option value="2">Foo</option>
<option value="3">Bar</option>
</select>
<button type="submit">Send</button>
</form>
Edit
I guess one of the things that confuses me is that whenever I inspect the <option> its value is automatically set to its innerText which is kind of expected and happens in all browsers. However, whenever the form is submitted, that value is not actually given as the value of the select. Instead, there is no value, considering that there is no query param appended. I'm using the following to grab the value:
document.getElementsByTagName("option")[0].value;
Edit 2
Another thing, according to the HTML spec that first option without a value should be the placeholder label option:
If a select element has a required attribute specified, does not have
a multiple attribute specified, and has a display size of 1; and if
the value of the first option element in the select element's list of
options (if any) is the empty string, and that option element's parent
node is the select element (and not an optgroup element), then that
option is the select element's placeholder label option.
And stemming from that this select option is suffering from being missing:
Constraint validation: If the element has its required attribute
specified, and either none of the option elements in the select
element's list of options have their selectedness set to true, or the
only option element in the select element's list of options with its
selectedness set to true is the placeholder label option, then the
element is suffering from being missing.
Does "Suffering from being missing mean that the form should not submit"?
You need to give it an empty value:
<option disabled selected value="">Hello</option>
If an option doesn't have a value attribute, it defaults to the text in the option. A required input will be considered valid if the value is not the empty string, so you need to provide the attribute explicitly.
I think the discrepancy in behavior between the browsers is permitted because the original HTML was not valid. The specification says
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1, then the select element must have a placeholder label option.
In the original code, there was no placeholder label option because the first option's value was not the empty string. So it violated the must have requirement in the second paragraph. This gives the browsers some license to interpret the HTML differently.
I have a case where I want to allow a form variable to be set to one of a set of value (in my current case true/false) or left unset (in which case no value is returned rather than some 'none' value or a blank). A check box can give the unset bit but only one set value. A radio element could work, sort of. But once a value is selected there is no way to go back to unset. All the other inputs I've looked at always set the variable no matter what.
Am I missing something or am I just going to have to accept a less-than-ideal solution?
Three radio buttons or a <select> with three <option> will do.
Put three radios: A, B and None
Do a 'drop down menu' as show here: http://www.echoecho.com/htmlforms11.htm
Create the default value as 'None' followed by option A and then option B.
What about a drop down list with
---Please Select---
Option A
Option B
I've been applying to a lot of jobs online lately, and this is the route people generally have been taking.
Would a dropdown box work?
<select name="choices">
<option>(None)</option>
<option value="a">Choice A</option>
<option value="b">Choice B</option>
</select>
You would need to use some javascript. If you have jQuery there are several tri-state checkbox plugins.
For example: http://plugins.jquery.com/project/tristate-checkbox
There are also probably non jQuery scripts if you google for "tri state checkbox"
For example: http://caih.org/open-source-software/tri-state-checkbox-in-javascript/
Using 3 radio buttons in one group, you could hide the first 'none' radio button with CSS (visibility:hidden; or display:none;), and if that's the one still selected during your form validation, then the user hasn't chosen either of the true or false radios.
EDIT (post comments):
If no-Javascript is a requirement, then you can conditionally apply a 'hideableItem' class on the hidden radio, if scripting is disabled the worst you'll get is 3 radio for the user to choose from, as others have described. If JS is enabled, then the default radio is hidden and provides the behaviour i've described.
The conditional hiding if JS is dis/enabled technique is described here: http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html
I use it all the time, its great.