below is the select html code and I'm looking for the first option which is 15
<select>
<option value="15" selected="selected">15</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
I have tried this below and I get all the selection 15,25,50,100
div#topPager.gridHeader div.pagerItemContainer select.pagesize option
if I use the nth of type like this then I got the first selection.
div#topPager.gridHeader div.pagerItemContainer select.pagesize option:nth-of-type(1)
is there any other way of doing instead of using the nth-of-type?
More to the point and accurate:
#yourSpecificSelectors option[value="15"] {}
This is called an attribute selector, in this case it matches the option with value="15".
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Related
I've made a select in html that looks like this <select name='select' id='select'><option value='val1'>Val1</option><option value='val2'>Val2</option></select>. Is there a way to set the default value of select to something like "pick a value"? Not as an option, but just the text of the select.
You can use the selected attribute within the option to select a default response. If you add the option disabled and hidden then this will be an invalid option.
<select name='select' id='select'>
<option value='val1' selected disabled hidden>Choose option</option>
<option value='val1'>Val1</option>
<option value='val2'>Val2</option>
</select>
Why not just have another option that doesn't have a value and give it the option of selected?
<select name='select' id='select'>
<option value='val1'>Val1</option>
<option value='val2'>Val2</option>
<option value='' selected>Choose Value</option>
</select>
Then in your php or whatever server side test to make sure you aren't accepting an empty value, or use js to not allow the form to submit if the value is blank?
Perhaps i'm misunderstanding here, but given the following html:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
I would expect "Something else" to be the default selected option. However, it does not seem to be. Why is this, and what should I be doing differently?
You use selected attribute on an option element to specify default option.
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option> // this is default
</select>
select elements do not have a value attribute.
The only way to have a default option is to have selected in the option tag.
<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else
React JS
Some coding implementations such as ReactJS allow you to use a value attribute with the <select> tag so this would be perfectly valid code:
<select value="2">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
So if you are seeing code examples like this it is likely because it is in React or other similar library/framework.
Of course, with this approach, typically you would want to specify the value in state, so that it is updateable.
HTML with Attribute Minimization:
However, if you are using purely HTML you must use the selected attribute in your <option> tag as follows:
<select>
<option value="1">Something</option>
<option value="2" selected>Something else</option>
</select>
HTML with Full Attribute Specification:
The above uses attribute minimization, but you can also specify the full form if you want:
<select>
<option value="1">Something</option>
<option value="2" selected="selected">Something else</option>
</select>
The <select> element does not have a value attribute so that is ignored. So, you have a single selection <select> and none of its <option> elements have the selected attribute, that means that the first <option> is taken as the default selection.
I know this post is quite old but in case anyone else is struggling with this you can implement the functionality you are looking for using jquery.
The full code using php would be something like this
PHP
if ($_SERVER['REQUEST_METHOD']== "POST") {
$thing = $_POST['things'];
} else {
$thing ="";
}
HTML
<select name='things' value="<?php echo $thing; ?>">
<option value="1">Something</option>
<option value="2">Something else</option>
</select>
JQUERY
$(function() {
$("select[value]").each(function() {
$(this).val(this.getAttribute("value"));
});
}); //end document ready
This will allow the select options chosen by the user to remain selected
after the page has re-loaded via post instead of returning
to the default values.
You have to use select attribute. in below code, a swift option will be selected by default
<select name="myCar" id="car">
<option value="ind">Indica</option>
<option value="swf" selected>Swift</option>
</select>
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 have a form with a select list of various office locations, i have it set so it should have the office initially selected BUT it does not seem to Work in IE!!! (no surprise)
here is what i am using to preselect:
<option selected value="Office 1">Office 1</option>
here is the site: http://www.nwtaxpreparation.com/offices/122andpowell.html
let me know if you have any solutions!
HTML 4 uses:
<option value="foo" selected>Bar</option>
XHTML REQUIRES:
<option value="foo" selected="selected">Bar</option>
To say that "there is no such thing as selected="whatever" is false!
I recently had the same problem with selected options tags. I had a series of select boxes like this:
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I couldn't work out why the correct items wouldn't select. I later discovered that it was because there was no name attribute on the select item. Firefox seems to need this to work properly, even in version 15.
<select name="type">
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I changed it to the above and selected="selected" works fine now.
I have a form which has several tags.
is this possible:
<select name="select1" id="select1">
<option id="1990" value="1990">1990</option>
<option id="1991" value="1991">1991</option>
</select>
<select name="select2" id="select2">
<option id="1990" value="1990">1990</option>
<option id="1991" value="1991">1991</option>
</select>
The ID are the same...
Thanks
No id can be assigned only once since it is an identity for just a single element. You need to use class instead but i wonder why you need to assign same ids? If you assign same ids to more than one element, and use javascript, etc to manipulate it, then only last element with same id will be taken care of ignoring all previous elements....
For more information, please see:
ID vs CLASS