Develop Reference

How to open a <select /> via label, ::before, or programatically?

Any solution need only work in WebKit browsers.
The internet is littered with attempts to make this work - some who claim to have it working and some who claim it can't be done. In my experience, none of the suggested methods have worked. Is this simply impossible?
Supposing I have a select like <select id="mySelect" />
Things I've tried:
select::before -- Is added to the DOM, but doesn't render
<label for="mySelect" /> -- Does nothing when clicked/tapped
document.querySelector('select').click() -- Does nothing
The method from this answer (React-specific) -- Cannot assign a click handler or any other handler that can programmatically open the select to begin with
I'm open even to a jQuery solution, even though we're using React and we would be loading jQuery solely for triggering the select to open.
On third party select components: The goal is to trigger the mobile OS's native select control for the user, so something like React-Select is not suitable.

A dirty solution updated from here (https://stackoverflow.com/a/249219/3684265)
var _select = document.getElementById("test");
_select.addEventListener("mouseout",function(){
this.size = 1;
});
_select.addEventListener("mouseover",function(){
this.size = 4;//set to show the number that you want
});
<select id="test">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</select>

Dropdown image not visible in Chrome and IE

I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.
Here is:
my site
On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.
You can see the images showing fine in Firefox but not using any other browser.
:
Here is the select dropdown code I used:
My JS
function goToNewPage(dropdownlist){
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != ""){
window.open(url);
}
}
My HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>

You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.
http://getbootstrap.com/components/#dropdowns

Sorry Got your Problem. The code you are using only works with Firefox and Webkit browsers. You either have to use JQuery UI for yuor need, or you can also some code at this link

With use of change() and show(), drop down list selection is not shown on android chrome

On the selecting a value from a drop down list, I wan't another hidden element to show up.
I'm using the following code:
$('#ddd').change(function() {
$("#divoption237").show(300);
});
<div id="option236" class="option">
<select id="ddd" value="236" name="option[236]">
<option value=""> --- Selecteer --- </option>
<option data-id="49" value="40">Hond</option>
<option data-id="50" value="41">Kat</option>
</select>
</div>
This all works fine in firefox, chrome and IE on my desktop. However I've run into some weird problem on my android phone in chrome. Whenever I select a value, for example Hond, it won't show up as being picked. So the user will still see -- Selecteer -- on his/her screen. The value is selected however and will be send if the form is sent. If I change show(300) to show(), the value is shown to the user. I'd like to use the animation though. Does anyone have a solution to this problem?

Creating a select drop-down list that expands when a user hover over an option

I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?

Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.

Applying rateit jquery plugin to a select box

I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question

You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();