Setting the default selection in a closed dropdown menu with ng-Options

Question

Setting the default selection in a closed dropdown menu with ng-Options

In my Angular project, I have a select dropdown that is populated from an array.

Each entry in the array is in lowercase format.
The variable "selected" that I use in other parts of my code needs to be in lowercase.
However, the entries displayed in the dropdown should be in uppercase format.
When the dropdown is closed, it should show the currently selected entry (in uppercase) with the prefix "VIEWING: "

While I know how to accomplish the first three points using

myValue.toUpperCase() for myValue in myArrayOfValues

, I am unsure on how to tackle the fourth point - either in Angular or with raw JS/jQuery.

Does anyone have a solution for this situation?

javascript angularjs select

Answer 1

Answer №1

It seems like you're looking for a combination of the following:

Here is the HTML code snippet you can use:

<select name=dropdown size=1>
    <option value="option1">option 1</option>
    <option value="option2" selected>VIEWING: option 2</option>
</select>

This is the JavaScript code you can implement:

var dropdown = $('select[name="dropdown"]');

dropdown.focusin(function() {
    var selected = dropdown.find(":selected");
    selected.html(selected.val());
});

dropdown.change(function() {
    updateSelected();
    $(this).blur();
});

dropdown.focusout(function() {
    updateSelected();
});

function updateSelected() {
    var selected = dropdown.find(":selected");
    var html = "VIEWING: " + selected.val();
    selected.html(html);
}

You can also view a working example on https://jsfiddle.net/r89oy2zk/

Answer 2

It seems like you're looking for a combination of the following:

Here is the HTML code snippet you can use:

<select name=dropdown size=1>
    <option value="option1">option 1</option>
    <option value="option2" selected>VIEWING: option 2</option>
</select>

This is the JavaScript code you can implement:

var dropdown = $('select[name="dropdown"]');

dropdown.focusin(function() {
    var selected = dropdown.find(":selected");
    selected.html(selected.val());
});

dropdown.change(function() {
    updateSelected();
    $(this).blur();
});

dropdown.focusout(function() {
    updateSelected();
});

function updateSelected() {
    var selected = dropdown.find(":selected");
    var html = "VIEWING: " + selected.val();
    selected.html(html);
}

You can also view a working example on https://jsfiddle.net/r89oy2zk/

Setting the default selection in a closed dropdown menu with ng-Options

Answer №1

Similar questions

matching equivalent URLs to identical states using an optional parameter in angular-ui-router

ERROR: Module 'jquery' not found in path 'C:....' when using Gulp and Browserify

The validation errors in the form of CodeIgniter are not being displayed by the JavaScript variable

Issue with Laravel - JavaScript not functioning properly following the passage of a parameter through the route

Leverage backend data in Angular-Google-Chart without the need for AJAX requests

Using $http and JSESSIONID in Glassfish server

Accordion menu causing Javascript linking problem

Avoid production build warnings in Vue.js without the need to build the code

Creating a three.js visualization of a cheerful X-Y coordinate graph

Javascript malfunctioning - exhausted all troubleshooting options

What is the best way to switch the visibility of a div on click from another div?

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

Restrict the option to select checkboxes

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

JavaScript: An object containing a unified handler for all method invocations

Ajax successful event fails to trigger

Using jQuery to dynamically format a date with variables

Efficient AJAX validation using PHP and JavaScript

Steps to establish the starting value as 'Concealed'

The Angular ui-calendar introduces an innovative approach to event addition, providing users with