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>

例如，如果我选择选项5，标准选择将仅显示值“5”。我想要“B / 5”。

Answer 1

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

＆＃13;

vars = {}
execfile('./vars.py',vars)
print vars['git_branch']

＆＃13;

$(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);
}

＆＃13;

为了将其分解，我们将所选值分配给变量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>然后我们过滤它，寻找一个文本与所选择的$(this).find("option")相同的那个，然后我们选择它的父项（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>

这将输出＆＃34; B / 5 ＆＃34;如果选择5。

嵌套选项不会打印所有路径

2 个答案: