选择显示基于其他选择的某些选项

Question

我正在使用带有两个选择选项的Laravel。我的选择取决于另一个。我尝试了几次尝试，但无法正常工作。

数据库如下：

companies
id
title

channels
id
company_id
title

我希望渠道（多项选择）与公司选择相对应。因此，如果选择ID为1的公司，则仅显示ID为1的频道。

这里是我当前的代码。我将select2（js-tags）用于多个选择：

Company:
<select class="form-control" name="company" id="company">
    @foreach($companies as $company)
        <option value="{{$company->id}}">{{$company->title}}</option>
    @endforeach
</select>

Channels
<select class="js-tags form-control" name="channels[]" multiple="multiple">
    @foreach($channels as $channel)
        <option value="{{$channel->id}}">{{$channel->title}}</option>
    @endforeach
</select>

我尝试了使用带有onchange功能的data-company-id =“ comapny_id”的jquery，该功能包括show（）和hide（），但似乎什么也没有发生。对此noobie的任何帮助将不胜感激

Contoller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Form;
use App\Channel;
use App\company;
use App\Brand;
use App\MediaTypes;
use App\Frequency;
use App\TypesCommunication;
use App\TeamForm;
use Auth;
use File;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Storage;

class FormController extends Controller
{
/**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $forms = Form::all();
        $teamupload = TeamForm::all();
        return view('forms.client.index', ['forms'=>$forms, 'teamupload'=>$teamupload]); 
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $brands = Brand::all();
        $companies = Company::all();
        $channels = Channel::all();
        $media_types = MediaTypes::all();
        $frequencies = Frequency::all();
        $typeComs = TypesCommunication::all();

        $uploads = File::allFiles(storage_path('app\upload\client/' . Auth::user()->name));

        return view('forms.client.create', [
            'brands'=>$brands, 
            'companies'=>$companies, 
            'channels'=>$channels,
            'media_types'=>$media_types,
            'frequencies'=>$frequencies,
            'typeComs'=>$typeComs,
            'uploads'=>$uploads
        ]); 
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $form = new Form;
        $form->job_description = "JOB-" . date('dMy-Hi');
        $form->start_date = $request->start_date;
        $form->end_date = $request->end_date;
        $form->event = $request->event_form;
        $form->editing = $request->editing_form;
        $form->additional_instructions = $request->additional_instructions;

        $form->upload = $request->upload;

        $form->company_id = $request->company;
        $form->brand_id = $request->brand;
        $form->type_coms = $request->type_communication;
        $form->frequency = $request->frequencies;
        $form->media_types = $request->media_types;
        $form->client_id = Auth::user()->id;

        $form->save();

        if ($form->save()) {
            $channel_ids = Input::get('channels');
            $form->channels()->sync($channel_ids);
        }

        if ($form->save()) {
            $clientuser = Auth::user()->id;
            $form->clientlog()->sync($clientuser);
        }

        return redirect(route('client-form.index'))->with('success', 'Form added successfully');

    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $form = Form::find($id);
        $channels = Channel::all();
        $teamupload = TeamForm::all();
        return view('forms.client.show', ['form'=>$form, 'channels'=>$channels, 'teamupload'=>$teamupload]); 
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $form = Form::find($id);
        $brands = Brand::all();
        $companies = Company::all();
        $channels = Channel::all();
        $media_types = MediaTypes::all();
        $frequencies = Frequency::all();
        $typeComs = TypesCommunication::all();
        $uploads = File::allFiles(storage_path('app\upload\client/' . Auth::user()->name));
        return view('forms.client.edit', compact(
            'brands',
            'companies',
            'channels',
            'media_types',
            'frequencies',
            'typeComs',
            'form',
            'uploads'
        ));        
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $form = Form::find($id);
            $form->start_date = $request->start_date;
            $form->end_date = $request->end_date;
            $form->event = $request->event;
            $form->editing = $request->editing;
            $form->additional_instructions = $request->additional_instructions;
            $form->company_id = $request->company;
            $form->brand_id = $request->brand;
            $form->frequency = $request->frequencies;
            $form->media_types = $request->media_types;
            $form->type_coms = $request->type_communication;
            $form->upload = $request->upload;
            $form->channels()->sync($request->channels);

            $form->save();

        return redirect()->route('client-form.index')->with('success', 'Form updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }

    public function downloadTeamFile($user, $file) {
        return response()->download(storage_path('app/upload/team/' . $user . '/' . $file));
    }

}

创建页面

@extends('layouts.app')

@section('content')

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800"><i class="text-primary fas fa-plus"></i> Client Forms</h1>
    <h4><span class="badge badge-success">Step 2</span></h4>
</div>

<!-- Content Row -->
<div class="row">
    <div class="col-md-12 col-xs-12 col-lg-12">
        <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Fill in the fields below...</h6>
        </div>
        <div class="card-body">
            <form action="{{route('client-form.store')}}" method="post">
            @csrf
                <div class="row">
                    <div class="col-md-12">
                        <label for="upload">Upload</label>
                        <select class="form-control" name="upload">
                            @foreach($uploads as $upload)
                            <option value="<?php echo basename($upload) ?>"><?php echo basename($upload) ?></option>
                            @endforeach                                
                        </select>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-md-2">
                        <label for="company">Company</label>
                        <select class="form-control" name="company" id="company">
                            @if($companies->isEmpty())
                            <option selected>None</option>
                            @else
                            <option selected>Please Select</option>
                            @endif
                            @foreach($companies as $company)
                            <option value="{{$company->id}}">{{$company->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="brand">Brand</label>
                        <select class="form-control" name="brand" id="brand">
                            @if($brands->isEmpty())
                            <option selected>None</option>
                            @else
                            <option selected>Please Select</option>
                            @endif
                            @foreach($brands as $brand)
                            <option value="{{$brand->id}}">{{$brand->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="type_communication">Type of Communication</label>
                        <select class="form-control" name="type_communication" id="type_communication">
                            @if($typeComs->isEmpty())
                            <option selected>None</option>
                            @else
                            <option selected>Please Select</option>
                            @endif
                            @foreach($typeComs as $typecom)
                            <option value="{{$typecom->id}}">{{$typecom->description}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="user_id">User</label>
                        <input class="form-control" name="user_id" type="text" disabled value="{{Auth::user()->name}}">
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-md-4">
                        <label for="channels">Channels</label>
                        <select class="js-tags form-control" name="channels[]" multiple="multiple">
                            @foreach($channels as $channel)
                                <option value="{{$channel->id}}" data-company-id="{{ $channel->company_id}}" style="display:none;">{{$channel->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="frequencies">Frequency</label>
                        <select class="form-control" name="frequencies" id="frequencies">
                            @if($frequencies->isEmpty())
                            <option selected>None</option>
                            @else
                            <option selected>Please Select</option>
                            @endif
                            @foreach($frequencies as $frequency)
                            <option value="{{$frequency->id}}">{{$frequency->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="start_date">Start Date</label>
                        <input class="form-control" name="start_date" type="text" data-provide="datepicker">
                    </div>
                    <div class="col-md-2">
                        <label for="end_date">End Date</label>
                        <input class="form-control" name="end_date" type="text" data-provide="datepicker">
                    </div>
                    <div class="col-md-2">
                        <label for="media_types">Media Types</label>
                        <select class="form-control" name="media_types" id="media_types">
                            @if($media_types->isEmpty())
                            <option selected>None</option>
                            @else
                            <option selected>Please Select</option>
                            @endif
                            @foreach($media_types as $media_type)
                            <option value="{{$media_type->id}}">{{$media_type->description}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-md-2">
                        <label for="editing">Editing Required</label>
                        <select class="form-control" name="editing" id="form-editing" onchange="disable('form-editing', 'form-editing-true')">
                            <option value="no">No</option>
                            <option value="yes" >Yes</option>                          
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="editing">Editing Info</label>
                        <input type="text" placeholder="What Editing" class="form-control" name="editing_form" id="form-editing-true" disabled value="">
                    </div>
                    <div class="col-md-1">
                        <label for="event">Special Event</label>
                        <select class="form-control" name="event" id="form-event" onchange="disable('form-event', 'form-event-true')">
                            <option value="no">No</option>
                            <option value="yes" >Yes</option>                          
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label for="event">Event Info</label>
                        <input type="text" placeholder="What Event" class="form-control" name="event_form" id="form-event-true" disabled value="">
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="col-md-12">
                        <label for="additional_instructions">Additional Instructions</label>
                        <textarea class="form-control" name="additional_instructions" id="textEditor" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="text-center pt-3">
                    <button class="btn btn-primary btn-block" type="submit">Submit</button>
                </div>

            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
$('select[name=company]').on('change', function(){
    var company_id = $(this).val();
    $('select[name=channels').find('option').hide(); // hide all options
    $('select[name=channels').find('option[data-company-id='+company_id+']').show(); // show those with correct company_id
});
</script>
@endsection

Answer 1

更改公司后，可以使用ajax加载频道。首先，您应该创建一条路由以列出特定公司的渠道，然后在更改时调用ajax：

$('#company').on('chnage', function(){
    var company_id = $('#company').val();
    $.ajax({
        url: "{{ route('listChannels')}}",
        data: {company_id: company_id},
       success: function(data){
           // add the id "channels" to the second select
           $('#channels').html(data);
           $("#channels").select2("destroy");
           $("#channels").select2();
       }
    }); 
});

在“ listChannels”路线中，只需创建一个函数即可返回一个视图，该视图仅包含您选择的特定公司的频道标签

在控制器中：

public function listChannels(Request $request){
    $company_id = $request->company_id;
    $channels = Company::where(['company_id' => $company_id])->get();
    return view('listChannels')->with(['channels' => $channels ]);
}

在listChannels视图中：

@foreach($channels as $channel)
    <option value={{ $channel->id }}>{{ $channel->title}}</option>
@endforeach

希望这会有所帮助

Answer 2

因此，在多个选择中显示和隐藏选项将不起作用。

从选择的频道中删除style="display:none"：

<select class="js-tags form-control" name="channels[]" multiple="multiple">
      @foreach($channels as $channel)
         <option value="{{$channel->id}}" data-company-id="{{ $channel->company_id}}">{{$channel->title}}</option>
      @endforeach
</select>

您的javascript以根据公司ID触发多项选择，应使用prop（）完成

$("#channels option[data-company-id='"+company_id+"']").prop('selected', true);

您还将看到，我为选择使用了一个ID，它的定义更为明确。

这是一个有效的代码段

$('#company').change(function(){
  var company_id = $(this).val();
  $("#channels option[data-company-id='"+company_id+"']").prop('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="company" id="company">
  <option value="1">Company Name 1</option>
  <option value="2">Company Name 2</option>
  <option value="3">Company Name 3</option>
</select>

<select class="js-tags form-control" name="channels[]" multiple="multiple" id="channels">
  <option value="1" data-company-id="1">Channel 1</option>
  <option value="2" data-company-id="2">Channel 2</option>
  <option value="3" data-company-id="3">Channel 3</option>
</select>

我希望这可以帮助您了解多重选择的工作原理。否则，您可以在此处https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

了解更多信息

Answer 3

找到了解决方案，但感谢你们俩都试图帮助我！

<script type="text/javascript">
//Channels filter
var $company = $( '#company' ),
    $channels = $( '#channels' ),
    $options = $channels.find( 'option' );

$company.on( 'change', function() {
  $channels.html( $options.filter( '[data-company-id="' + this.value + '"]' ) );
} ).trigger( 'change' );
</script>