嵌套选项不打印所有路径

Question

当我点击一个选项时，select 只显示选项值。在 angular 中有没有办法显示带有嵌套选项的 select 的完整路径？

<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>

例如，如果我 select 选项 5，标准 select 将只显示值“5”。我要 "B / 5".

Answer 1

嗯，我不知道如何正确地做到这一点，但我想出了一个解决方法。

$(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>

为了分解它，我们将 selected 值分配给变量 y。然后我们获取 select 输入并找到它的子 $(this).find("option") 然后我们过滤它寻找文本与所选文本相同的 $($(this).find("option")).filter(function() {return $(this).text() === y;}) 然后我们 select它的父级（optgroup），然后是其标签的值。

Answer 2

可以通过指令实现，

<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>

这将输出“B / 5”如果你 select 5.

嵌套选项不打印所有路径

Nested options doesn't print all path

javascript

select

options

angularjs