Question

朋友。面对这样一个问题。我有两个选择，在每个选择的城市中他们从数据库中取出，在第二个选择 - 城市是！=从第一个选择到城市。帮帮我，拜托..）代码

       <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

我用jquery来完成这个。为此我必须添加第一个选项说“请选择＆＃39;对彼此而言。在更改#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>

显示两个选项的选项

1 个答案: