Suppose I have this dropdown list:
<select>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
and some text like this:
<h2>xxx</h2>
I want to replace "xxx" with the value of the selected option from the dropdown. I know how to do this in javascript, query...
My question is more if there is some hack to make this work in html/css only.
You can detect if option is check with CSS property :checked (do that : option:checked), but you can't change text with only HTML or CSS.
I try to display h2 element with :checked and brother property like that :
<select>
<option value="1">
<p>Audi</p>
<h2>Audi</h2>
</option>
<option value="2">
<p>BMW</p>
<h2>BMW</h2>
</option>
</select>
But it's impossible to put something other than text
Related
I have a select with some options displaying text:
<select *ngIf="cars" class="form-control">
<option *ngFor="let car of cars" value="true">{{car.ID}}</option>
</select>
Is it possible to add an Icon at the beginning of the option? Like [icon]3
UPDATE
I have added the library font-icons to my .angular-cli.son:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome-4.7.0/css/font-awesome.min.css"
and update the code of my select to:
<select *ngIf="cars" class="form-control glyphicon">
<option *ngFor="let car of cars" value="true"> {{car.ID}}</option>
</select>
I use bootstrap 3
It tries to print an icon, but I get an empty square. Any idea?
It seems to me that you are using Bootstrap. So, it is possible to put icon inside option, like this.
<select class="form-control glyphicon">
<option value=""> Icon 1</option>
<option value=""> Icon 2</option>
<option value=""> Icon 3</option>
</select>
Sadly it is not possible using plain HTML <select>. It is possible with wrapper for select. Your own piece of code, that is displayed instead of browser's default select. I recommend you to find some library with ready-to-use wrapper. For example there is select wrapper inside Angular Material (https://material.angular.io/components/select), but you can find standalone wrappers.
I have a problem here.
There's a select element with some options, and I wonder if it's possible to change the dropdown's background, width and font.
The sample markup is:
<form action="">
<span>Show</span>
<select name="cars" id="indicator-filter-options">
<option value="all" selected>Cars</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
I didn't paste my css because it's written in SASS using variables.
Is it possible to achieve a similarly looking background and hover effect as in here:
The dropdown design I'm trying to achieve is HERE
You cannot style dropdown options like that unless you use unordered list. The demo below might give you an idea.
<ul><li>Option One</li></ul>
View Demo
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>
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/