My code works perfect in firefox and gives error in IE. any ideas?
I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.
function selectNames() {
var Name = $("#SelectName").attr("value");
$("."+Name).each(function() {
$(this).hide();
});
}
<select >
<option class="Name1" value="SomeName1" </option>
<option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" </option>
<option value="Name2" </option>
</select>
Any help is appreciated..
Make sure you close the start tag. Try to use this:
<select>
<option class="Name1" value="SomeName1" />
<option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" />
<option value="Name2" />
</select>
Seems to work for me in IE8.
It won't work in IE & Chrome
check out in IE or Chrome
The best alternative that you can do is to remove the option rather than hiding it.(you should keep a copy of the original options before removing it.)
var copy = $("."+Name).clone();
function selectNames() {
$("#thefirstselect option").remove();
copy.appendTo("#thefirstselect");
var Name = $("#SelectName").val();
$("."+Name).each(function() {
$(this).remove();
});
}
Your markup is not correct. You are each option open tag isn't properly closed.
Also, the specs do not specify CSS changes to individual option tags, though it does work on Firefox.
In simpler words, you cannot hide individual inputs - in which case, you'll have to remove them.
If this is a direct copy and paste then you need to close the select options to look like this:
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
I would suggest having two selects that you show and hide. Show and hide of options sounds risky.
Also, make sure you set the hidden select to attr('disabled','disabled')/disabled="disabled" and then when you unhide it undo that with removeAttr('disabled'). This is to prevent the hidden select from posting data to the server when you have multiple selects with the same name="...".
If you must use a single select, you may want to appendTo/remove the options, but that is up to you. If show/hide works in all browsers, go for it.
Sadly, you just can't.
IE don't support hide of individual options in a select, neither Chrome or Opera.
This feature isn't cross browser.
What you can do is remove the option and add it again later...
Related
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>
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
I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);
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.
Greetings,
Having a such select box:
<select id="events">
<option value="1" style="background-color:green;">Event 1</option>
<option value="2" style="background-color:yellow;">Event 2</option>
<option value="3" style="background-color:blue;">Event 3</option>
<option value="4" style="background-color:red;">Event 4</option>
</select>
At the initial browser render of this selectbox and each time a selection is done, I want the selectbox "events" to get the background-color of the selected option.
How can this be achieved via jquery or via regular javascript ?
//Alert color on initial page load
var bkg = $("#events option:selected").css("background-color");
alert(bkg);
//Handle change event and alert color when selection is done
$(function(){
$("#events").change(function() {
var bkg = $("#events option:selected").css("background-color");
alert(bkg);
});
});
selected
$('#events').bind('change', function() {
var bgc = $(this).find('option:selected').css('background-color');
});
You can do this:
$("#events").change(function() {
$(this).css("backgroundColor",
$(this).find(":selected").css("backgroundColor")
);
}).change();
You can test it out here. But, this won't work in all browsers, especially in IE the <select> element is notoriously unstyleable (for lack of a better...or real word). It'll work in the browsers that support it and just have no effect in the ones that don't. You may instead wait to style a parent element to give an indicator in all browsers, something like this.
IE friendly way, this has to applied to option tag.
$(this).html($(this).html());