tooltip for select in html - javascript

I have a list of car that can be selected from dropdown as
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
this code gives me code of dropdown, I need a hover message as "select your car" on hovering on the box. There is a option of select that gives message for each option, however my need is to display tooltip only when hovering the select box.


The easiest way is to add a title attribute:
<select title="Select your car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
It doesn't look that great though. If you want a fancier tooltip you'd have to go the JavaScript route.

Related

How to style the dropdown UI in the basic html select element in React?

<select className="option-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Here is how the basic select is defined. How to target the dropdown list UI? For example, changing the default background of the dropdown.
EDIT:
I find that it does work in Chrome if I target the <option> element. But on firefox, it does not work.

select {
background: yellow
}
option {
color: red
}
<select className="option-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

It's possible to style the select menu 'button', but not the dropdown itself. To accomplish that you need to mimic the functionality with javascript. https://www.w3schools.com/howto/howto_custom_select.asp

Just a few CSS properties can change dropdown appearance and it's better to use a react components library such as material-ui.

The position: fixed is not working over option tag in IE browser

I want to have a header in select tag with fixed positioning but setting the position value to fixed in IE browser is not working for the option tag
<select multiple style="height:130px">
<option value="volvo" style="position:fixed">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Have you tried using the <optgroup> tag? Maybe this is can help you determine what you're looking for in this jsfiddle. But I don't think adding a style attribute to an option tag will work for all browsers nor will it look correct. I think <optgroup> might be the closest you will get to achieve something of the sort.
https://jsfiddle.net/9pudbj0z/

How to Add two Select tags with Submit button to Jump to url URL

I'm trying to setting up a dropdown menu selector.
When visitor choose "Volvo" from the first dropdown menu and choose "White" from the second dropdown menu then hit submit button. He should jump to URL 1, and so on.
Can I do this?
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</body>

<form target="_blank" action="/page_url" method="get">
<select name="carbrand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel" selected="selected">Opel</option>
<option value="audi">Audi</option>
</select>
<select name="carcolor">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
</select>
<br/><br/>
<input type="submit" value="Submit">
</form>
You could use form and input tags.
As above example, after clicking on the button a new page will open (target="_blank" attribute opens the URL in a new window or tab).
In this case using the method="get" form attribute, the values of the dropdowns are passed as parameters in URI /page_url?carbrand=opel&carcolor=red. If instead the method="post" form attribute used, the values of the dropdowns aren't present in the URL.

You can put your drop downs into a form, that way when the form is submitted (with your submit button), you can then use the form values to determine what content to load.
Alternatively, if you want to do this without the server side logic, you replace your submit button with a simple <button type="button"...> and have the on click of that button handle the logic to open the page you want.

I think you should use this like this :
<option value="volvo"><a href='http://example.com'>Volvo</a></option>
</select>```

Multiple select text "0 objects"

I have a select box with multiple attribute, here is an example:
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
On laptop everything works fine but on mobile browser, there is automatically added text like "0 items" or, "3 items" (after selecting some items). Same like here:
How can I change this text to e.g "3 Filters" ?
Regards.

Select/disselect only a single option on click in a select (with the multiple attribute) form element

I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.

Categories