2つの選択肢を表示する

Question

友達を表示します。そのような質問に直面した。私は2つの選択肢を持っています。それぞれの選択肢はデータベースから取り出され、2番目の選択肢 - 都市は！=最初の選択肢からの都市までです。私はこれを達成するためにjqueryのを使用pleasee、私を助けて...） コード

 <form action="{{route('countDistance')}}" method="post"> 
    <div class="starter-template"> 
<select class="selectpicker" name="from" id="from"> 


@foreach($deps as $depart) 
<option>{!!$depart->City!!}</option> 
@endforeach 
</select>  
<select class="selectpicker" name="to" id="to"> 


@foreach($deps as $depart) 
<option>{!!$depart->City!!}</option> 
@endforeach 
</select> 
    <button type="submit" class="btn btn-info">Count &raquo;</button> 
    {{ csrf_field() }} 
    </div> 
    </form> 

Answer 1

。そのためには、最初に「両方を選択してください」というオプションを追加する必要がありました。 #fromセレクトボックスを変更したら、同じテキストのオプションを#toセレクトボックスから隠しました。また、オプションを隠す前にすべてを表示していたので、今まで隠されていたオプションが利用できるようになりました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <form action="{{route('countDistance')}}" method="post"> 
    <div class="starter-template"> 
    <select class="selectpicker" name="from" id="from"> 

    <option>Please select</option> 
    @foreach($deps as $depart) 
    <option>{!!$depart->City!!}</option> 
    @endforeach 


    </select>  
    <select class="selectpicker" name="to" id="to"> 

    <option>Please select</option> 
    @foreach($deps as $depart) 
    <option>{!!$depart->City!!}</option> 
    @endforeach 

    </select> 
    <button type="submit" class="btn btn-info">Count &raquo;</button> 
    {{ csrf_field() }} 
    </div> 
    </form> 

<script> 

$(document).ready(function() { 

    $("#from").change(function() { 
     // first show all from #to 
     $("#to > option").each(function() { 
      $(this).show(); 
     }); 

     console.log($("#from").val()); 
     var toHide = $("#from").val(); 
     $("#to option:contains('" + toHide + "')").hide(); 
    }); 
}); 

</script>