Mouse over option in select tag - javascript

Please suggest me a solution for my problem. I have a html select tag. When i mouse over on any option of select tag, it has to show an image on mouse over. How can i do it??

According to the w3c spec, mouseover event is not supported by the option element.
There is no solution your requirement except to develop a custom drop down control.

OnMouseover event for option works only in firefox and doesnt work in IE.
For IE, either use JQuery or use onMouseover for select tag

You can simply solve your problem using the answer in the question below. There are a two ways of solving mouse events problem with select option on pure JS
Mouse over option in select tag
One of the way - is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below:
https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ

You can do some thing like
<select title="This is a select">
<option value="blah blah" onmouseover="window.status=this.value" title="blah blah">item 1</option>
<option value="hello" onmouseover="window.status=this.value" title="hello">item 2</option>
<option value="hi" onmouseover="window.status=this.value" title="hi">item 3</option>
</select>
refer to the mouseover for more

Related

Rails with MaterializeCSS generates "input" in addition to "select", makes dynamic loading impossible

I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?
It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

'disable' attribute of option HTML element is not working in IE 8

i'm facing a problem in disabling an 'Option' HTML element within a 'Select' HTML element group in IE8.
Below is my Code snippet:
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="vauxhall">Vauxhall</option>
<option disabled="true" value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
if i try to run the above code in IE8, i see it as disabled inside dropdown list. However, if i start to type or key in 'Ope..' it appears for selection in the dropdown textbox.
In Firefox, Chrome it works fine, i.e. typing doesn't allow it for selection in dropdowns textbox.
when i searched on net, i found one workaround which suggests to replace "Option" with "Optgroup" element, but it doesn't seems to be a good solution since i need to :
1. apply CSS to make it look like its disabled.
2. and do scpriting to replace Option with Optgroup and vice-versa while enabling/disabling dropdown elemnts
this is the Link which gives this workaround
http://harrybailey.com/2008/11/disabling-select-options-in-internet-explorer/
Can anyone please tell me if there is a correct way to disable option element in IE8 or am i missing the right attribute?
--- Thanks
Abhinav Ganguly

Selecting an option using fancy select

I've got a fancy select with code similar to the following, yet adding the selected=selected attribute to one of the options (with JS) does not change which item is currently selected.
<li class="field">
<div class="picker">
<select>
<option value="#" disabled>Favorite Doctor…</option>
<option>Colin Baker</option>
<option>Sylvester McCoy</option>
<option>Paul McGann</option>
<option>Christopher Eccleston</option>
<option>David Tennant</option>
<option>Matt Smith</option>
</select>
</div>
</li>
How can I change the selected option and have this change reflected in the select box.
Try to trigger the change event after you set the selected option, for example:
$('option:eq(2)').prop('selected',true).trigger('change'); // or .change()
Fiddle Demo
Solved it by setting the select.val() to the text of the option I'm trying to select.
I solved it by mending FS's code. It was using :selected as a selector. Changed it to [selected="selected"] and it behaved. Best to just avoid FS completely though, in my opinion. I inherited it on a project I'm working on.
Around line 56 in my copy, now changed to:
triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));

what is a good method to insert a <img src="..." /> into a <option> </option> in HTML page?

use javascript or other method ?
have any recommendation?
IMAGE tag can not be within OPTION one (as per HTML4.01 and XHTML1.0). Apply it as a background image (of an option element) instead.
...
<option style="background-image:url(...) ...">...</option>
...
Also note that some browsers don't allow much styling on select and option elements. For example, Safari doesn't support "background-color" on option elements (there's a WebKit bug filed back in '06 :))
I've heard that Chrome has similar "issues" as well.
I would recommend you to use CSS. For example:
<select style="width: 100px;">
<option style="background-image: url(/images/a.png);">First option</option>
<option style="background-image: url(/images/b.png);">Second option</option>
</select>
You can use fontAwesome instead, to show some 'img'. For example, using &#xF046 can show a checkbox image. It's better than nothing. Or you can edit the font to show a simple image.

Categories

Resources