This is the strangest thing that happens to me
when the first load, the selected from the field is appear, but after a sec then suddenly disappear.
It's only an ordinary HTML select option but IDK what is causing this, I've checked on CSS and there is no weird colliding CSS...
I put only simple HTML code like this:
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Here is the video to show you what really happens
Strange selected select option
Sorry my mistake, there is onload JS code rendered on another file
window.onload = function() {
$('input[type="text"], textarea, select').val('');
}
This code is meant to clear the text area field when the page is reload
but seems i can't use this code because it's colliding with the select option
Related
I have a normal Html Select control with following options:
<form action="/target.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" style="width: 100px; overflow-x: auto;" multiple>
<option value="volvo">Long select option.</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
The first option in the list is a bit longer that the rest. When I select it, I can see the following effect:
However, as I use the horizontal scrollbar to see the rest of the value it appears something as in the image below:
The text on the right are all lost (say both foreground and background are while). Now, I click somewhere outside the Select control, the text appears but half of them selected and rest not.
I tried this with different online html editor and all of them share same behaviour. Is there a way (any css) that I can apply so that once an option is clicked/selected the entire option is selected and not just a portion of it.
The below code is a bit hacky, but it will serve the purpose. You can add the below CSS to make sure the whole item is selected.
option:checked {
width:150px;
}
I would also suggest just increasing the width of the selector for a better user experience, if you do that, you will not encounter the above error.
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.
How implement subj?
when i write:
<form>
<select>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is "aaaa"
when i write:
<form>
<select>
<option value=""></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is blank, but this blank item presents in drop down.
how i can implement SELECT tag with default blank value that hidden in dropdown list?
Just use disabled and/or hidden attributes:
<option selected disabled hidden style='display: none' value=''></option>
selected makes this option the default one.
disabled makes this option unclickable.
style='display: none' makes this option not displayed in older browsers. See: Can I Use documentation for hidden attribute.
hidden makes this option to don't be displayed in the drop-down list.
You can by setting selectedIndex to -1 using .prop: http://jsfiddle.net/R9auG/.
For older jQuery versions use .attr instead of .prop: http://jsfiddle.net/R9auG/71/.
Simply using
<option value="" selected disabled>Please select an option...</option>
will work anywhere without script and allow you to instruct the user at the same time.
<select>
<option value="" style="display:none;"></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
Here is a simple way to do it using plain JavaScript. This is the vanilla equivalent of the jQuery script posted by pimvdb. You can test it here.
<script type='text/javascript'>
window.onload = function(){
document.getElementById('id_here').selectedIndex = -1;
}
</script>
.
<select id="id_here">
<option>aaaa</option>
<option>bbbb</option>
</select>
Make sure the "id_here" matches in the form and in the JavaScript.
You can't. They simply do not work that way. A drop down menu must have one of its options selected at all times.
You could (although I don't recommend it) watch for a change event and then use JS to delete the first option if it is blank.
For purely html #isherwood has a great solution. For jQuery, give your select drop down an ID then select it with jQuery:
<form>
<select id="myDropDown">
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
Then use this jQuery to clear the drop down on page load:
$(document).ready(function() {
$('#myDropDown').val('');
});
Or put it inside a function by itself:
$('#myDropDown').val('');
accomplishes what you're looking for and it is easy to put this in functions that may get called on your page if you need to blank out the drop down without reloading the page.
You can try this snippet
$("#your-id")[0].selectedIndex = -1
It worked for me.
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.
I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.