Select with nested options

[raulpacheco2k]

I'm migrating from Laravelcollective to Laravel HTML, in Collective I can display nested options in the selected ones. But I'm not able to do the same thing with Laravel HTML.

Is there any way to use html()->select() with nested options? I tried to find something but I didn't find it. I had to make a component for this, but I'm not satisfied with this solution. Is there anything more elegant?

@foreach($options as $option)
    @if(is_array($option))
        <optgroup label="{{array_keys($options)[$loop->iteration - 1]}}">
            <x-nested-options :options="$option"></x-nested-options>
        </optgroup>
    @else
        <option>{{$option}}</option>
    @endif
@endforeach

I would like to do something similar to this:

{{ html()->select('transaction_category_id', $nestedOptions) }}

Previously the code was like this in Collective

{{ Form::select('transaction_category_id', $transactionCategories, $bankTransaction->transaction_category_id ?? null) }}

And this was the result.

[edmonde-honda]

Nested options in a select element can be represented using children() and optgroup() in the following way.

    @php
    $nestedOptGroup = new Collection();

    $child = new Collection(['label' => 'optgroup_1']);
    $child->children = new Collection();
    $child->children->add(new Collection(['label' => 'some-label-1', 'value' => 1]));
    $child->children->add(new Collection(['label' => 'some-label-2', 'value' => 2]));
    $child->children->add(new Collection(['label' => 'some-label-3', 'value' => 3]));
    $nestedOptGroup->add($child);

    $child = new Collection(['label' => 'optgroup_2']);
    $child->children = new Collection();
    $child->children->add(new Collection(['label' => 'some-label-4', 'value' => 4]));
    $child->children->add(new Collection(['label' => 'some-label-5', 'value' => 5]));
    $child->children->add(new Collection(['label' => 'some-label-6', 'value' => 6]));
    $nestedOptGroup->add($child);

    $currentValue = 5;
    @endphp

    {{ html()
      ->select('optgroup_value')
      ->placeholder('(SelectOne)')
      ->children($nestedOptGroup, function ($childNode) use($currentValue) {
        return html()->select()->value($currentValue)->optgroup($childNode['label'], $childNode->children->pluck('label','value'));
      })
    }}