Is the CSS for the selected option not functioning properly in Internet Explorer version 10?

$('#inputTest').on('input', function() {
  $('#helloSellect option').css({
    display: "none"
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSellect" multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>

I need assistance in hiding the options when a user types in the input box. It works fine in Chrome but has issues in IE. What could be causing this problem and how can I fix it?

javascriptjqueryhtmlcss

Answer №1

In my experience, not all browsers fully support the display:none property. One workaround you can try is disabling the invalid options and then setting up your CSS to hide those disabled entries.

For example:

$('#helloSellect option').prop({'disabled': true});

Next, add this CSS rule:

select option[disabled] {
    display: none;
}

Alternatively, you can simply remove the unwanted entries as mentioned earlier (unless you anticipate needing them later on).

Answer №2

You cannot simply use CSS to "hide" options within a <select> element. While Chrome may provide some level of visual hiding, the options are still present in the DOM. The only effective way to actually remove options is by removing them from the DOM entirely.

$('#helloSelect option').on('click', function() {
  $(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSelect"  multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

JQuery script showing no signs of functioning, even though it runs smoothly in the console

I'm looking to create a clickable div for the Nivo slider on this website so visitors can easily navigate to a featured article. To debug the issues, I wrote the following script in Chrome's console: var $j = jQuery.noConflict(); $j(function(){ ...

jqueryconsole

CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page direct ...

htmlcssprintingsafarimedia-queries

The ASP.NET MVC3 form collection registers as 0 when performing a jQuery ajax post

I'm currently developing a project on ASP.NET MVC3. My current challenge involves POSTing to a method that should return a set of data using the jQuery.ajax api. However, upon handling the request on the server, I noticed that the form collection&apo ...

javascriptjqueryasp.netajaxasp.net-mvc

What steps can I take to troubleshoot the 'Uncaught DOMException: failed to execute add on DOMTokenList' error?

I am looking to create media icons <div class="contact"> <span> <i class="fa fa-phone"></i> </span> <span> <i class="fa fa-facebook"></i> </spa ...

javascripthtml

Dynamic way to fetch computed properties in VueJS

I am trying to find a way to calculate the sum of computed properties that begin with the string calculateSum. The challenge is that I cannot access their names using this.computed. Here is my approach: getSubTotal(){ var computed_names = []; var ...

javascriptvue.jsvuejs2vue-component

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

javascriptjqueryhtml

Incorporate a Web Worker into your webpack library for enhanced performance

I am facing an issue while attempting to include a web worker in my custom npm package. [App] -> [my npm package -> load worker] Within the npm package, I am utilizing worker-loader to import the worker file: import Worker from 'worker-loader! ...

javascriptreact-nativenpmwebpackweb-worker

What is the best way to retrieve data from within HTML tags using PL/SQL?

Within my Oracle PL SQL project, I am dealing with an html file that contains the following comment tag. I need to figure out how to retrieve the value between these comment tags. <comment label="Comments">Text_to_Extract</comment>&l ...

htmloracleplsql

What is causing this JavaScript alert to malfunction?

My current project involves working with ASP.NET and in the view, I have a code snippet that is causing some issues. When I attempt to use Sweet Alert outside of the function, it works perfectly fine. Similarly, if I switch out Sweet Alert for a regular al ...

javascripthtmlasp.netalertsweetalert

What is the best way to determine when the context value has been established?

Currently encountering an issue while trying to display a header. To achieve this, I begin by making an API call in InnerList.js and setting a list in context using the data from the API call. Next, in Context.js, I assign the list to a specific data set ...

javascriptreactjsreact-hooksreact-context

The Ajax function is not defined and results in a runtime error being thrown

customAjax.postJson( "/foo/GetFoo", { fooName: fooName }, function (data) { }, function (error) { }); }; My Rest api call is GetAsync() It throws customAjax is unde ...

javascriptajaxjsonrest

Header text aligned with image to accommodate parent size

Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs ...

htmlcss

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular

Should we employ getAttribute() or avoid it entirely? That is the ultimate query

Similar Topic: JavaScript setAttribute vs .attribute= javascript dom, how to handle "special properties" as versus attributes? On multiple occasions, I've encountered criticism in forums or Usenet about the way I access attributes i ...

javascriptattributessetattributemembersgetattribute

What could be causing my jQuery to only toggle the first arrow in my HTML?

I am facing an issue with a series of divs generated from data, each containing an arrow that should toggle an expandable section. Strangely, only the first div is functioning properly: toggling the arrow icon and revealing the content upon click. When th ...

javascriptjqueryhtmlcss

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?

Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...

cssangularjscheckbox

I'm curious if it's possible to perform background tasks using React Native Expo with the example I have in mind

Is there a way to perform background tasks in React Native Expo? I am looking to make a POST request every 5 seconds and log the results. Can someone guide me on how to achieve this using the example from this site? I would like to modify the given exampl ...

javascriptreactjsreact-nativeexpobackground-process

Clicking on a link to reveal the nearest <OL> list items

Among my multiple definition lists are nested ordered lists and anchors. When clicked, I aim to retrieve the relevant list items. Can someone confirm if the code below is the correct approach? Appreciate it. <dl> <dt><a href="/">Colors ...

jqueryclosest

Organizing content on a webpage with specific pixel measurements

I have a div and am utilizing Bootstrap 5. I'd like to have the Description and Length elements on separate lines when the page width is <=1024px. <div class="col-3 col-md-4 col-lg-3"> <div class="card d- ...

cssbootstrap-5