Issue with IE 11: Selected value does not appear when multiple selections are made and there

Hello there,

I've been running into some difficulties with IE11 in relation to multiple select options.

When setting the selected option to an item that requires scrolling, IE does not scroll to it as expected. Interestingly, this works fine in Chrome.

To take a closer look, please visit my JSFiddle.

<head>
 <meta charset="utf-8" />
 <title></title>
 <style type="text/css">
    select {
        max-height:60px;
        width:100px;
        float:left;
    }
 </style>
 </head>
 <body>
 <select multiple="multiple" id="selectBox">
    <option value="1">1</option>
    <option value="2">1</option>
    <option value="3">1</option>
    <option value="4">1</option>
    <option value="5">1</option>
    <option value="6">1</option>
    <option value="7">1</option>
    <option value="8">1</option>
    <option value="9">1</option>
    <option value="10">1</option>
    <option value="11">1</option>
    <option value="12">1</option>
    <option value="13">1</option>
    <option value="14">1</option>
    <option value="15">1</option>
    <option value="16">1</option>
    <option value="17">1</option>
    <option value="18">1</option>
    <option value="19">1</option>
    <option value="20">1</option>
    <option value="21">1</option>
    <option value="22" selected="selected">4</option>
 </select>
</body>

Is this a well-known issue? Am I overlooking something?

UPDATE Kindly refer to the updated JSFiddle link for a workaround/fix.

Thank you

Answer №1

If you are experiencing a similar issue, you can try out the workaround/fix that worked for me:

(function (element) {                                   
 if (element.find(':selected').val()) {
     var val = element.find(':selected').val();
     console.log(val);
     element.val('');
     element.val(val);
  }
})($('#selectBox'));

In my situation, I found it necessary to include this function within a setTimeout to resolve the problem.

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

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

Generate a data URL from the retrieved image

TL;DR I've been attempting to retrieve an image, convert it to base64, and insert the data URL into the src attribute of an img tag, but unfortunately, it's not functioning as expected: async function ajax(id) { const element = document.getEl ...

Navigating through jQuery and straightforward code?

Before I pose my question, let me clarify my objective: I aim to write code with maximum efficiency while still incorporating extensive functionality. In my eyes and those of my colleagues, this is what we refer to as 'beautiful code'. The issue ...

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

Unable to extract HTML text using Selenium Java

Here is the HTML code I am working with: <span id="slotTotal"> <span id="slotUsed">4</span> /16 </span> I am trying to extract the text "/16" but encountering an issue when using this code: slotTot = driver.findElem ...

Enhance Cascading Dropdown functionality with Javascript for dynamic linking

I've been attempting to include hyperlinks in my JavaScript dropdown list, but when I attempt to do so, the dropdown list stops functioning. The dropdown list consists of three levels: State: California, Oregon) County: California includes Monterey, ...

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

Is there a way for me to establish a maximum word count for a paragraph?

When my paragraphs get lengthy, I only want the first 30 words to display on two lines. Is there a way to achieve this using HTML, CSS, or JS? The code snippet I tried did not work as expected. .long-text{ width: 70ch; overflow: hidden; white-sp ...

When manipulating a parent element with identical dimensions, SVG shadows are only clipped during the transformation

Why is the drop shadow of my SVG getting cut off when I scale or rotate its parent element? The behavior seems to change when the parent element is the same width and height as the SVG. Here's a link for reference. scale.addEventListener("mousedo ...

Creating a CSS filter for the background color of the ::selection pseudo-element

Is there a way to make text appear in a color derived from its colored background? I have considered using the following CSS code: ::selection { backdrop-filter: brightness(.25); } However, this approach does not seem to work as expected. The challenge ...

Manipulate and scale with jQuery

I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...

Concealing Angular Features Using a Button

Currently, I am experimenting with Angular and attempting to create a button that disappears when clicked. Despite trying methods like [hidden], (click)="showHide = !showHide", and several others, nothing seems to be working as expected. This is the curre ...

Angular is used to send an HTTP GET request

I'm seeking assistance with implementing a get and put request in Angular. I understand how to initiate a get or put request when a button is clicked, by binding the request to the button itself. However, I am now looking for a way to trigger a get re ...

Embedded Youtube code saved in database is not displaying on HTML form

My PHP update page allows me to modify a website's database that contains YouTube embed codes. However, when I try to edit the embed code on the update page, only "<iframe width=" displays instead of the complete original code. <html> <? ...

How can I efficiently utilize the date picker feature in Angular JS for a smooth user experience?

I am new to AngularJS and attempting to implement a date picker. I initially tried using a basic jQuery UI date picker, but it did not function as expected. Can someone please provide me with some code that demonstrates the simplest way to achieve this in ...

Tips for preventing the occurrence of the $digest already in progress error

I am experiencing an issue in my AngularJS application with the following code snippets: getGridPage('api/accounts/gettransactions') //$http call to server which sets the $scope $scope.transactions = {} The error message "$digest already in pro ...

Styled HTML Radio Button Failing to Register Click

When I select the radio button, it does not actually get clicked and the status of other buttons remains unchanged. The CSS code being used is as follows: input[type="radio"] { display:none; } input[type="radio"] + label { height: 20px ...

Interactivity Battle: Clickable Div, Button, or href?

I'm currently exploring the optimal methods for generating buttons using HTML and CSS. In the past, I used clickable divs, but it seems that may not have been the most effective approach. Should I consider using buttons or anchor tags instead? What ...

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...