I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
Related
If a <select> element has a selected option, Chrome will ignore that selected option even if autocomplete="off" on the <select> element when using the browser's "navigate back" functionality. One workaround I have found is wrapping the select in a <form>, but I don't want extraneous forms in my html.
Question: Is there a way to fix this in Chrome without wrapping in a form element? (This behavior does not occur in Firefox, haven't tested other browsers)
To reproduce, using Chrome 77:
1.) Visit this jsfiddle, and change both selects to "One". Note that "Two" is the selected option for both, so when the page loads this is what should be selected in both elements
2.) Click on the link to google (page navigation won't actually occur, jsfiddle output can't actually navigate to webpages)
3.) With your mouse having clicked in jsfiddle output, click the browser's back button
4.) You'll note that the select element which is wrapped in a form has the correct element selected by default, "Two". The select element which is not wrapped in a form has the incorrect element selected, "One"
https://jsfiddle.net/m5hg8n40/1/
<!-- chrome ignores 'selected' -->
<select autocomplete="off">
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
<br><br>
google.com
<br><br>
<!-- chrome obeys 'selected' -->
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
MAC OS Catalina 10.15
Browsers
Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)
Safari Version 13.0.2 (15608.2.30.1.1)
Firefox 70.0
Actions tested:
Onload the jsfiddle i see both with the two option selected
If i click google link and go back, both keeps two selected
If i modify first select (without form) to one, go google and go
back, it keeps the one selected
If i modify the second select (with form) to one, go google, and go
back, it will show the two option selected
So as far as i see.
On load works for both, but the window History treats slightly different both input select, if they are wrapped or not in a <form>tag
One will keep the last action executed, and the other will take priority of the form to reset its inputs to the default state.
Excepcion: Firefox treat both with the same behavior (like without the form)
For me it seems legit to use the tag there if you need it, they can be use to collect data even if they are going to be used locally or remotely.
( is not worse than pages having 1047248 <div>'s everywhere and zero semantic HTML ) so its really up to you i think. And if you need to store data in another way you could use LocalStorage
I think you can't do anything without js.
<body onload="document.querySelector('select').value = document.querySelector('select [selected]').value">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
<br><br>
google.com
<br><br>
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
</body>
I'm using a combobox (select) to display countries. I doing this using Bootstrap.
This is the code
<select class="form-control form-control-user" id="inputCountry" name="country" placeholder="Country">
<option value="NL">Netherlands</option>
<option value="BE">Belgium</option>
<option value="LX">Luxembourg</option>
<option value="GR">Greece</option>
<option value="NO">Norway</option>
</select>
When I go to my browser, my combobox is empty. When I click it I can see the entries. When I select an entry, nothing shows in the combobox. When I try to echo the value of the combobox, I get the value, so it's a visual issue.
removing 1 of the classes (form-control or form-control-use) will fix this, but the design I want gets lost.
Is there any way to fix this?
I have tried your code block and it was working without a problem.
This is the JSFiddle link which I have done some modificatoins:
https://jsfiddle.net/mw5904uf/
Here, I have created form-control-user css class. I am not sure that this is what you want. Anyhow make sure you have linked css and js files correctly as Charlene said.
In addition, since your placeholder didn't work, I have modified that by adding another option.
The text between the option tags in a select box is not rendering correctly when open in my Chrome Version 37.0.2062.120.
See attached screenshot for a clear illustration of the issue.
When I select an option and focus away from the box the correct option is selected and renders correctly when the select box is closed.
I've tested the same in Canary 39.0.2161.0 and FF and it renders correctly without being distorted.
I've not seen anything like is before.
Anything to do with Chrome's recent font rendering update?
Any help is much appreciated.!
Link to page, form is at the bottom: http://dev.emarkadvantage.com/strategy.php
UPDATE: A fix that worked for me was to move the position of the SVG font down the #font-face stack to the bottom.
I have had this before. Use a standard (i.e. non web) font for your selects. I don't know why web fonts cause a problem...but they do.
See also this answer.
You should add class on select tag,
class="form-control"
<select id="category" class="form-control">
<option value="">Your top callenge today?</option>
<option value="Sales">Sales</option>
<option value="Competition">Competition</option>
<option value="Marketing ROI">Marketing ROI</option>
<option value="Positioning">Positioning</option>
</select>
I have two drop downs in a search box, a "YearFrom" and a "YearTo".
When nothing has been selected in the "YearFrom", the "YearTo" box looks a little like this :
However the functionality is that once a "YearFrom" is selected, that the "YearTo" fields only offer what is available AFTER the year from. In essence, we end up with HTML like this :
<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>
So any years below the YearFrom value are hidden. However what we then end up with is the select list looking like this :
So it isn't so much as a drop down, as now a tiny little box with a scroller on the right.
For reference, this doesn't happen in any other browser. e.g. this is how it looks in Firefox.
I've just come across this error as well.
My guess is that the Chrome browser calculates the drop-down height by measuring the heigths of the options and optgroups, but stops calculating the moment it comes across an element that has no height or is display:none.
To work around this in my own code, I dynamically rearrange the options after each update so that display:none elements are at the bottom of the list. it creates another visual bug (white space on right of dropdown) but I can live with that one.
I have a very simple select drop down. In Chrome, it doesn't drop down. The code itself works fine, and the drop down works in Safari, but for some reason it won't open in Chrome. Here is the HTML:
<select name="pellet_credit" class="item_discount">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
It should be pretty simple. It's a dropdown... Here's a screenshot of the select, selected, but not open:
--- edit ---
This is a jsfiddle with the full source included. The dropdown works for me in the jsfiddle view, but not on the actual site.
http://jsfiddle.net/HSYvf/
--- edit ---
Other drop downs on the page work fine.
Validate your HTML to make sure there aren't extraneous closing/end tags. Make sure you aren't hiding the options through CSS as well.
I had the same problem with Firefox and Chrome and due to the z-index of the form being -1.
When changed the z-index, it worked fine.
This happened to me when I put a <select> inside a jQuery .sortable() element. I copied this code right off the jQuery website, and the .disableSelection() method call killed my <select>.
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Once I removed the .disableSelection(); (which oddly enough they've deprecated...) everything worked just fine.
I think you should set a value for your options
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
you can read more here
what ended up happening to me that caused me to be on this page is that display was set to display:none; on the option elements
solution:
$(yourdropdown).children().show();
We had a crazy problem when we were developing a client/server programming language which had a listbox. Although INPUT worked the listbox didn't. We have mouse tracking on it and by a bug the $(window).mousedown... was being enabled by default.
We were able to track the problem with this page: https://hackernoon.com/finding-that-pesky-listener-thats-hijacking-your-event-javascript-b590593f2a83
Just in case the above page disappears:
In Chrome (possibly other Chromium flavours [works on Opera too]):
Right click on element.
Click 'Inspect...'
When the 'Elements' are shown, the right panel will have [Styles][Computed][Event Listeners] (tabs). Click on 'Event Listeners'.
Look for 'mouseup', 'mousedown', 'keyup', etc and expand what you suspect and remove it to see if that fixes the problem (debug).
Change the code.
What we did was change the 'return false' to 'return true' in our code.
To debug such issues try removing all attributes from the html and add them one at a time to find out what is causing the issue.
For example, the snippet below does not work as needed.
<select size="10">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
Removing the size attribute fixes it
<select >
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
I'm adding an answer just to call out the comment by #Agos in the selected answer. Check if you have event handling code (mousedown, click, etc.) that might be stealing the events from the dropdown.
The problem for me was that I had included class names in the id declaration.
For future audience, notice in particular if your select element is inconsistent with the surrounding form styles. This is a likely clue that a class isn't being applied correctly, and you may have accidentally placed it in the wrong spot.