从下拉列表中将选定的目标删除到另一个下拉列表

Question

I am currently developing an airline reservation using PHP(Codeigniter). Currently the fields/radio buttons that I have:

2 radio button

1) One way

2) Round Trip

2 dropdown list

1) From

2) To

and so on..

When the user trying to book, the user can't repeat the destination he inputted "from destination" into "to destination". Example: I have 3 destinations; 1) Country 1; 2) Country 2; 3) Country 3, then user tries to book. From: Country 1, To: Country1. The Country 1 in the "To:" should not be display because he already use it in the From Destination.

NOTE: The thing that I do first is, call all the available destinations in my controller then call it in my view using my foreach.

<div class="pure-u-1-1 fromto">
               <div class="pure-u-1-1">
                  <label for="from" class="margin2px">From</label>
                  <!-- <input type="text" class="fromto"><br> -->
                  <select class="fromto" name="flight_from">
                  <?php foreach($flight as $a):?>
                    <option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
                  <?php endforeach?>

                  </select>

               </div>
                <div class="pure-u-1-1">
                  <label for="to" class="tomargin">To</label>
                  <!-- <input type="text" class="fromto"><br> -->
                  <select class="fromto" name="flight_to">
                    <?php foreach($flight as $a):?>
                      <option value ="<?= $a->flight_name?>" ><?= $a->flight_destination?></option>
                    <?php endforeach?>
                  </select>
                </div>

Question: How can I prevent it from repeating the country I selected in my "from destination" into "to destination"?

Answer 1

You may use jQuery:

 $('select[name=flight_from]').on('change',function(){ $("select[name=flight_to]").find('option').show(); var from = $(this).find(":selected").val(); $("select[name=flight_to]").val(''); if ( from != "" ) { $("select[name=flight_to]").find( 'option:contains("'+from+'")' ).hide(); } }) 

 <select name="flight_from"> <option value="">-- Please select depature --</option> <option>Country 1</option> <option>Country 2</option> <option>Country 3</option> </select> <select name="flight_to"> <option value="">-- Please select destination --</option> <option>Country 1</option> <option>Country 2</option> <option>Country 3</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>