<select size="4" name="lbxEmployees" id="lbxEmployees" disabled="disabled" class="FormDropDown" style="width:100%;">
<option value="1">jim jubak</option>
<option value="2">Peyton Andrew</option>
<option selected="selected" value="3">Pat smith</option>
<option value="4">Mark Smith</option>
<option value="5">Kobe Bryan</option>
</select>
The above code renders differently on IE9 and IE7. Can someone explain why? The select box is disabled in both browsers, but one shows the selected value (IE7) while the other does not (IE9).
It's simply because IE9 is a different browser. IE7 was released back in 2006, while IE9 in 2011. There is no point of showing what is default in something that isn't enabled, so they've disabled it..
EDIT:
If you want to disable it because of security, you should enforce that on the server-side. If a hacker copies your source code, and removes the "disabled" part, they will be able to change and include that information as well.
Interesting , starting with an enabled check box, I tried this as a poss way to fool IE9 ...
<script type="text/javascript">
document.getElementById("lbxEmployees").value = 3;
document.getElementById("lbxEmployees").disabled=true;
</script>
didn't work. did in IE7
( if your goal is to presnt to the user the selected value and have to have the select box ) looks like we might need to do something like ...
<div id="EmployeesDiv">
Employee:
<select name="lbxEmployees" id="lbxEmployees">
<option value="1">jim jubak</option>
<option value="2">Peyton Andrew</option>
<option selected="selected" value="3">Pat smith</option>
<option value="4">Mark Smith</option>
<option value="5">Kobe Bryan</option>
</select>
</div>
<script type="text/javascript">
window.onload = function() {
var selectBox = document.getElementById("lbxEmployees");
var val = (selectBox.options[selectBox.selectedIndex].text;
/* remove select box and replace */
document.getElementById("EmployeesDiv").innerHTML ="Employee: "+val;
}
</script>
your app might have a simpler way of course, the IE9 thing got me thinking ...
*Not great if the reason for the disable is security, do all this on the sever side before page print if so!
Related
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
I have a basic SELECT element like this:
<select name="bla" id="bla">
<option value="1">Opt1</option>
<option value="2">Opt2</option>
</select>
I want that if this component is rendered by Safari browser, it renders
<select name="bla" id="bla">
<option value="">Select an option</option><!-- ONLY FOR SAFARI BROWSER -->
<option value="1">Opt1</option>
<option value="2">Opt2</option>
</select>
What is the faster way to implement it ?
Thanks to support
There is no HTML component which can condition the browser, but you can add dynamically an option with Javascript on browser detection.
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
I have come across a strange CSS issue.
I have a drop down selector like this HTML markup:
<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
<option value="-1" selected="selected">- Choose a category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
Now, I want to hide one of these select option (let´s say Category 5) using CSS, so I use this CSS code:
select#cat_p option[value="5"] {
display: none;
}
And the result is perfect in Chrome and Firefox, but in Safari and IE this CSS does not work.
I have checked in Safari developers panel and I can see that the CSS is registered as valid and it is not "crossed out" / overwritten by other CSS, so it should work, I would think.. very weird..
Does anyone have a clue what the problem is here?
I made a fiddle so you can see the problem first hand:
http://jsfiddle.net/wH8kF/
You can not use toggle or display:none property or the hide/show with select option in the Safari browser. It is working for all other browsers like Chrome, Firefox, etc. This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).
Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!
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.