javascript - 嵌套选项不打印所有路径

Question

当我单击一个选项时，选择仅显示选项值。有没有办法在 Angular 中显示带有嵌套选项的选择的完整路径？

<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

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

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

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