Laravel7 根据选中值动态显示segment输入框的即时生效问题

你当前使用的Blade @if 是服务端渲染阶段的条件判断，仅会在页面加载、提交后回退等服务端重新渲染页面的场景生效，无法响应用户在前端的实时选择操作，需要补充前端JavaScript交互逻辑实现动态效果。

步骤1：调整Blade模板结构 #

不要用@if 完全移除segment选择框的DOM，改为默认隐藏，仅通过@if判断首次加载时是否需要默认显示：

<div class="col-md-4 list_select_box" target-box="segments-select-box" segments-url="{{ action('SegmentController@selectBox') }}" data-index="{{ $index }}">
    @include('helpers.form_control', [
        'name' => 'lists_segments[' . $index . '][mail_list_uid]',
        'include_blank' => trans('messages.choose'),
        'type' => 'select',
        'label' => trans('messages.which_list_send'),
        'value' => (is_object($lists_segment_group['list']) ? $lists_segment_group['list']->uid : ""),
        'options' => Auth::user()->customer->readCache('MailListSelectOptions', []),
        'rules' => isset($rules) ? $rules : []
    ])
</div>

<!-- 保留容器，默认隐藏，首次加载按条件显示 -->
<div class="col-md-5 segments-select-box multiple" data-index="{{ $index }}" style="{{ (is_object($lists_segment_group['list']) && collect($lists_segment_group['list']->readCache('SegmentSelectOptions', []))->count()) ? '' : 'display: none;' }}">
    @include('helpers.form_control', [
        'value' => implode(",", $lists_segment_group['segment_uids'] ?? []),
        'type' => 'select',
        'name' => 'lists_segments[' . $index . '][segment_uids][]',
        'label' => trans('messages.which_segment_send'),
        'options' => collect($lists_segment_group['list']->readCache('SegmentSelectOptions', []) ?? []),
        'multiple' => true,
        'quick_note' => trans('messages.leave_empty_to_choose_all_list')
    ])
</div>

步骤2：添加前端监听逻辑 #

在页面底部添加JS代码，监听联系组下拉框的change事件，选中后动态获取对应segment选项、切换显示状态：

// 如果支持动态新增多个联系组，改为委托绑定：$(document).on('change', '[name^="lists_segments["][name$="[mail_list_uid]"]', function () {
$('[name^="lists_segments["][name$="[mail_list_uid]"]').on('change', function () {
    const listUid = $(this).val();
    const index = $(this).closest('.list_select_box').data('index');
    const segmentsUrl = $(this).closest('.list_select_box').attr('segments-url');
    const $segmentsBox = $('.segments-select-box[data-index="' + index + '"]');
    const $segmentsSelect = $segmentsBox.find('select');

    // 未选择联系组时隐藏segment选择框
    if (!listUid) {
        $segmentsBox.hide();
        $segmentsSelect.empty();
        return;
    }

    // 发起请求获取当前选中联系组的segment选项
    $.post(segmentsUrl, {
        mail_list_uid: listUid,
        _token: '{{ csrf_token() }}'
    }, function (res) {
        // 没有segment则隐藏
        if (!res || res.length === 0) {
            $segmentsBox.hide();
            $segmentsSelect.empty();
            return;
        }
        // 有segment则渲染选项并显示
        $segmentsSelect.empty();
        res.forEach(item => {
            $segmentsSelect.append(`<option value="${item.uid}">${item.name}</option>`);
        });
        $segmentsBox.show();
    });
});

步骤3：适配后端接口 #

对应调整SegmentController@selectBox接口，接收mail_list_uid参数，返回对应联系组的segment列表即可，返回格式参考：

public function selectBox(Request $request)
{
    $list = MailList::where('uid', $request->mail_list_uid)->firstOrFail();
    $segments = $list->readCache('SegmentSelectOptions', []);
    return response()->json($segments);
}

内容的提问来源于stack exchange，提问作者Ali Aljarrah