Printing paths of nested options is incomplete

Question

Printing paths of nested options is incomplete

Is there a way to display the full path of a select with nested options in angular? When I click on an option, currently it only shows the option value.

<select>
    <optgroup label="A">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </optgroup>
    <optgroup label="B">
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </optgroup>
</select>

For example, if I select option 5, the default select will only show "5". Is there a way to make it show "B / 5" instead?

javascript angularjs html-select

Answer 1

Answer №1

Although I'm not entirely sure of the correct method, I have devised a workaround.

$(function()
{
   $('select').change(changed);
});

function changed()
{   

    var y = $(this).val();
    
    var x = $($($($(this).find("option")).filter(function() {return $(this).text() === y;})).parent()).attr('label');
    console.log(x);
    
    $('#test').text(x + ' / ' + y);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
    <optgroup label="A">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </optgroup>
    <optgroup label="B">
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </optgroup>
</select>
<div id="test"></div>

In simple terms, we first store the selected value in variable y. Then, we search for the children of the select input $(this).find("option"), filter it to find the option with text matching the chosen one

$($(this).find("option")).filter(function() {return $(this).text() === y;})

, and then select its parent (the optgroup) to retrieve the value of its label.

Answer 2

Although I'm not entirely sure of the correct method, I have devised a workaround.

$(function()
{
   $('select').change(changed);
});

function changed()
{   

    var y = $(this).val();
    
    var x = $($($($(this).find("option")).filter(function() {return $(this).text() === y;})).parent()).attr('label');
    console.log(x);
    
    $('#test').text(x + ' / ' + y);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
    <optgroup label="A">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </optgroup>
    <optgroup label="B">
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </optgroup>
</select>
<div id="test"></div>

In simple terms, we first store the selected value in variable y. Then, we search for the children of the select input $(this).find("option"), filter it to find the option with text matching the chosen one

$($(this).find("option")).filter(function() {return $(this).text() === y;})

, and then select its parent (the optgroup) to retrieve the value of its label.

Answer 3

Answer №2

To accomplish this, you can use a directive:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('myapp', []);

        app.directive('getVal', function () {
            return function (scope, ele) {
                var element = angular.element(ele);

                element.change(function (e) {
                    var y = element.val();
                    var selected = angular.element(':selected', element);
                    var optionLabel = selected.closest('optgroup').attr('label');

                    angular.element('#output').text(optionLabel + ' / ' + y);
                });
            };
        });
    </script>
    <body ng-app="myapp">
        <select get-val>
            <optgroup label="A">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </optgroup>
            <optgroup label="B">
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </optgroup>
        </select>

        <div id="output"></div>
    </body>
</html>

When selecting 5, the output will be "B / 5".

Answer 4

To accomplish this, you can use a directive:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('myapp', []);

        app.directive('getVal', function () {
            return function (scope, ele) {
                var element = angular.element(ele);

                element.change(function (e) {
                    var y = element.val();
                    var selected = angular.element(':selected', element);
                    var optionLabel = selected.closest('optgroup').attr('label');

                    angular.element('#output').text(optionLabel + ' / ' + y);
                });
            };
        });
    </script>
    <body ng-app="myapp">
        <select get-val>
            <optgroup label="A">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </optgroup>
            <optgroup label="B">
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </optgroup>
        </select>

        <div id="output"></div>
    </body>
</html>

When selecting 5, the output will be "B / 5".

Printing paths of nested options is incomplete

Answer №1

Answer №2

Similar questions

Switch app engines in real-time based on the URL path with express framework

The displayed value in the text field remains constant even when the object's attribute is modified

What is the method to define a function in express js that is accessible from all views?

My AJAX function is not functioning as intended

Tips for integrating AsyncGenerators with Kotlin/JS

Is there a way to direct the user's cursor to a specific location on the page when they hover over an image?

Vue component input form not providing expected result

Tips on extracting information from several JSON response objects

React Native: Picker value remains static

I am experiencing an issue with my jQuery loop code not functioning properly when using the .each method within the loop

Utilizing $templateCache with ui-router and minifying in AngularJS 1.x

Sorting table tbody elements created dynamically with JavaScript on an npm webpack application is not possible with jQuery UI

Using Angularjs and PHP: incorporating URL parameters into the $http.get() function

Arrange data in JSON file based on job title (role name) category

What are some ways to personalize a scrollbar?

Incorporating AngularJS Controller to Render Asp.Net MVC 5 View

Resolving a request timeout: Steps to fix the issue

Puppeteer and Chromium are ready to go with no need for any configuration

Unable to include an additional parameter within a JavaScript function

Create a Rest API and implement server-side rendering concurrently using SailsJs