Error: End tag for 'optgroup' which is not finished. You have probably failed to
include a required child element. Hence the parent element is "not finished",
not complete.
I want to achieve something like this in select options.
USA
UK
--
Afghanistan
I want to put few important countries on top and then a non-selectable divider and then ordered list of remaining countries.
I put this divider using empty 'optgroup'. While it works perfectly in all browser, I get validation error.
What could be other approaches to implement this?
Similar to what #ZippyV wrote, you can just use an <option> and make it be disabled:
<option disabled='disabled'>--</option>
That won't be selectable. Also if it were me I'd use an m-dash and not two hyphens:
<option disabled='disabled'>—</option>
You didn't post any code, but I bet you have something like:
<select>
<option>USA</option>
<option>UK</option>
<optgroup label="---"></optgroup>
<option>Afghanistan</option>
<option>...</option>
</select>
This is invalid because your optgroup contains no option elements. You need to use something like:
<select>
<option>USA</option>
<option>UK</option>
<optgroup label="---">
<option>Afghanistan</option>
<option>...</option>
</optgroup>
</select>
Don't use an optgroup for this.
Just put this <option val="-">--</option> in your code
Related
I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:
.clear-css {
all:unset;
}
and append it to all options using jquery just before it is used, like this:
$('option').addClass('clear-css');
Still blank.
I've also tried
.clear-css {
all:initial;
}
Still blank.
I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.
Any suggestions?
You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:
// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="" disabled selected>Choose an option...</option>
<option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
<option value="vanguard">Vanguard</option>
</select>
Select values must be within the actual <option> tags:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
<option value="Vanguard">Vanguard</option>
</select>
I am facing an issue with a drop down select in IE11. If the drop down contains one option element it does not expand down while selecting options. The option is overlapping the select which makes it difficult to select.
Example: I have a drop down which consists of element "Ajitesh"
<select> <option> Ajitesh </option> </select>
In the above code whilst selecting "Ajitesh" the drop down is not expanding down .
You could try to contain the single option in an opt-group tag like so:
<select>
<optgroup label="">
<option value="Ajitesh">Ajitesh</option>
</optgroup>
</select>
Otherwise, you could simply add an another - or many - empty option tags like:
<select>
<option value="Ajitesh">Ajitesh</option>
<option value=""></option>
</select>
edit: Please note that this is IE11 (and others) default behaviour, that is, it has been designed to prohibit the use of a dropdown with only one option. If you do not want to add an empty element, there isn't the option of changing the default behaviour of the browser itself - it's just not possible given your circumstances.
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/
I've looked far and wide, but could not find anything.
Is there an "anatomy of HTML elements" guide of sorts that has this kind of information?
EDIT: By "visible" I mean "visible by default", without user (or anything else for that matter) having engaged it.
"the dropdown (arrow|icon|button)" is the name of the thing on the right side and "selected value display" is the (usually) white box with the default/selected value. As far as I know, there are no standard names for the shadow dom
I would call this "selected value". In ASP.Net, for example, that's the property name for the visible value in a drop down list control (a SELECT input).
If, by visible portion, you mean 'What option is visible by default (or on the initial load)", what you need to do is add 'selected="selected"' to the option tag you want to show eg:
<select name="tester">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3" selected="selected">Third Option</option>
<option value="4">Fourth Option</option>
</select>
This would display a select box with 'Third Option' showing in it.
You can find out more about <select> and <option> on W3 Schools:
http://www.w3schools.com/tags/tag_select.asp
http://www.w3schools.com/tags/tag_option.asp
Are you referring to the CSS display property? Also might help to understand what you are trying to accomplish.
My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep).
I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as:
United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan
The problem is with the indentation. I am trying to use either margin-left or padding-left to indent the tags, which appear correct in FireFox but not in IE7. This is an example of the generated select list:
<select name="Something">
<option style="padding-left: 0">United States</option>
<option style="padding-left: 20px">Hawaii</option>
<option style="padding-left: 40px">Kauai</option>
<option style="padding-left: 20px">Washington</option>
<option style="padding-left: 40px">Seattle</option>
<option style="padding-left: 40px">Chelan</option>
</select>
I want to achieve consistent indentation across browsers without using CSS hacks.
The rendering of SELECT elements is largely up to the browser, you have very little influence over their presentation. Some browsers obviously allow you more customization than others, IE happens to allow very little (gasp, who'd have thunk ;)). If you need very custom SELECT elements, you'll need to employ JavaScript or re-create something that behaves like a SELECT but is made of a bunch of DIVs and checkboxes or something to that extend.
Having said that, I think what you're looking for are OPTGROUPs:
<select>
<optgroup label="xxx">
<option value="xxxx">xxxx</option>
....
</optgroup>
<optgroup label="yyy">
...
</optgroup>
</select>
Every browser will display them differently, but they'll be displayed in a distinctive fashion in one way or another. Note though that officially in HTML4 you can't nest OPTGROUPs.
deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
It's far from pretty but it might work for you if the optgroup doesn't.
Just for the sake of visitors, I feel I should share this solution I devised: http://jsfiddle.net/n9qpN/
Decorate the options with the level class
<select name="hierarchiacal">
<option class="level_1">United States</option>
<option class="level_2">Hawaii</option>
<option class="level_3">Kauai</option>
<option class="level_2">Washington</option>
<option class="level_3">Seattle</option>
<option class="level_3">Chelan</option>
</select>
We can now use jQuery to reformat the content of the select element
$(document).ready(
function(){
$('.level_2').each(
function(){
$(this).text('----'+$(this).text());
}
);
$('.level_3').each(
function(){
$(this).text('---------'+$(this).text());
}
);
}
);
This can be extended to any level
Try using
<select name="Something">
<option>United States</option>
<option> Hawaii</option>
<option> Kauai</option>
<option> Washington</option>
<option> Seattle</option>
<option> Chelan</option>
</select>
Isn't this method of grouping creating more problems than it solves? As a user, which of those am I supposed to choose? Is there any benefit to choosing something more specific than country?
If the issue is that you only have one database field to store them in, why not have three separate select boxes (making 2 or 3 optional) and just store the most specific?:
<select name="country">
<option>Choose a country</option>
<option>United States</option>
</select>
<select name="state">
<option>Choose a state</option>
<option>Hawaii</option>
</select>
<select name="city">
<option>Choose a city</option>
<option>Kauai</option>
</select>
I was able to accomplish this using the NO-BREAK SPACE unicode character. http://www.fileformat.info/info/unicode/char/00a0/index.htm
Copy-paste the character from that page into code and voila:
https://jsfiddle.net/fwillerup/r9ch988h/
( didn't work for me because I was using a library for fancy select boxes that would inject them verbatim.)
Prepending Non breaking space ( ) did not work for me.
I prepended the following:
String.fromCharCode(8194);