"Disabling options in HTML select element not supported in Microsoft Edge browser

I am facing an issue with the following code snippet:

<div class="input-field col s12">
   <select [(ngModel)]="view.frequency" >
      <option value="" disabled selected>Select frequency</option>
      <option [value]="1">Never</option>
      <option [value]="2">Rarely</option>
      <option [value]="3">Sometimes</option>
      <option [value]="4">Often</option>
      <option [value]="5">Always</option>
   </select>
   <label>Select frequency</label>
</div>

While on Chrome browser, the output looks as expected. However, when viewed on Edge browser, it seems to disregard the disabled option and defaults to the first value Never:

https://i.sstatic.net/7ndRm.png

Can anyone shed some light on why this behavior is occurring?

htmlcssmicrosoft-edge

Answer №1

By changing the disabled attribute in your option value to disable, you will only get a value of 1 for the selected option.

<div class="input-field col s12">
   <select [(ngModel)]="view.frequency" >
       <option value="" disable>Choose frequency</option>
       <option [value]="1">Never</option>
       <option [value]="2">Rarely</option>
       <option [value]="3">Sometimes</option>
       <option [value]="4">Often</option>
       <option [value]="5">Always</option>
   </select>
   <label>Choose frequency</label>
</div>

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

Looking for a solution to resolve the error in this SQL example?

I'm looking to extract node "-all_models=1-4.htm" in SQL using the example provided. Here is my current code: <div class="models_selector_block" > <DIV class="msb_item"> <a class="ser_active" hr ...

htmlsql

Switch Parent Element's Class

I am facing an issue with my web application where I need to dynamically change the background color of certain cells in a table based on their stored values. After searching online for JavaScript and jQuery solutions, I have not been able to find exactly ...

javascriptjqueryhtml

Adding a row from two drop-down lists to a table and deleting it upon selection

Looking to dynamically update a table based on dropdown selection in jQuery. When a value is selected from the first dropdown list (projects), followed by a selection from the second dropdown list (employee), the selected values should be added as a new ro ...

javascriptjqueryhtml

The namespace 'pages' has not been registered

Attempting to load an index in this environment: ├── admin_material │   ├── admin.py │   ├── apps.py │   ├── forms.py │   ├── __init__.py │   ├── models.py │   ├── __pycache__ │   │  ...

pythonhtmldjangodjango-viewsdjango-templates

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

PHP and MySQL not displaying the image

I have written the following code to display information about an image, including its file, but for some reason, it is not appearing on the screen. <?php include('config/dbconnect.php'); if(isset($_GET['id'])) ...

phphtmlmysqlcssimage

I would like to smoothly fade in and out the text within the anchor tag, creating a subtle and gentle effect

My bootstrap navigation bar has icons that transition to text when hovered over, but the change is too abrupt. I would like it to appear more smoothly and gradually, similar to the effect on this website This is an example of my HTML code: <nav cla ...

javascripthtmlcssbootstrap-4

Oops! Looks like we have encountered an error: X is not recognized

As I navigate through the WebOS enyo framework, frustration starts to set in. The error message displayed in my log is causing me a headache. Despite examining samples within the framework, pinpointing the source of the error has proven to be a challenge. ...

javascripthtmlwebosenyo

Display numbers in Vue with the thousand separator

I am currently using a division calculator that is functioning properly, but I am not satisfied with the calculation results. The issue becomes more clear when you refer to the screenshots below. What I aim to achieve is to remove unnecessary zeros, add co ...

javascripthtmlvue.js

ASP.NET showcases icons in a distinct manner compared to HTML and CSS

I'm encountering an issue while trying to convert HTML/CSS to ASP.NET. In the original HTML, the icons were arranged in a single row of four icons, and for mobile devices, they were displayed in 2x2 rows. When I attempted to copy and paste the HTML wi ...

htmlcssasp.net

Converting an HTML menu to a WordPress menu: A step-by-step guide

Hey everyone, I've got some code in my HTML file that's using the 320 Bootstrap WP theme. I've created a menu and it's working fine. However, the box above the menu isn't moving along with it from menu to menu. Any ideas on how to ...

javascriptjqueryhtmlwordpress

How can AngularJS focus on the last element using ng-repeat and md-focus?

, there is a code snippet that utilizes AngularJS ng-repeat directive to iterate through 'items' and 'md-autofocus' attribute to focus on the last element. The code is contained within an md-dialog with vertical scrolling functionality. ...

javascriptangularjscssangular-material

Remove the formatting on the entered text

Hi, I'm looking to change the style of my input text to a strike-through style. Can anyone help me with this? <input type="text" value="<del>Hello World!</del>" /> I would like my input text to look like this: ...

htmlcssbootstrap-4frontend

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

Need assistance posting on Twitter? Utilize PHP for a solution!

I'm attempting to share a user-generated and dynamic URL on Twitter, but I'm having trouble with the encoding... <a href="http://twitter.com/?status=[urlencode('I'd like to borrow this item @neighborrow')].">TWEET THIS REQUE ...

phphtmlapitwittercharacter-encoding

Is Chrome launching a list of links in separate windows instead of tabs?

As I create a customized start page for myself, I've encountered a challenge. I want to include a link above all sections that, when clicked, will open all pages in a new tab. However, I'm facing an issue where only the first link opens in a new ...

javascriptjqueryhtml

Issue with button vanishing upon clicking page forward in pagination for table

When I click the next button on the table pager, a button that is inline with the pager disappears. I'm not sure why this is happening. If you want to see my code, check out this JS Fiddle: $table.trigger('repaginate'); var pager = documen ...

jqueryhtml

What's the reason behind CSS selectors not allowing empty spaces, while XPath does?

Why is it that Xpath is able to find an HTML element with a class attribute containing empty spaces, while CSS cannot? # Element: <div class="I Love StackOverFlow"></div> self.page.locator('//div[@class="I Love StackOverFlo ...

pythoncssxpathplaywright-python

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Personalized Owl Carousel - OWL.JS Hover Pause Feature

I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...

javascriptjqueryhtmlcssowl-carousel