Block certain options in a HTML drop down box using Javascript

Question

I know this question or similar has been asked a few times however I can't find a suitable answer. I am creating a website where people can book bus journeys. I have two drop down boxes, both with the same locations. I want it so when a certain departure is selected, only certain locations within the destination drop down box are enabled. For example, if London is selected in the first drop down, you cannot select London or any of the locations in which the bus does not travel to in the second drop down.

Here is our HTML

     <b> Departure: </b> &nbsp;
     <select name="leave" id="leave" required>
     <option value="" selected id="disabled">-- Select --</option>
     <option value="Bristol" id="Lbristol"> Bristol </option>
     <option value="Newcastle" id="Lnewcastle"> Newcastle </option>
     <option value="Manchester" id="Lmanchester"> Manchester </option>
     <option value="London" id="Llondon"> London </option>
     <option value="Glasgow" id="Lglasgow"> Glasgow </option>
     </select>

    <b> Destination: </b> &nbsp;
    <select name="arrive" id="arrive" required>
    <option value="" selected id="disabled">-- Select --</option>
    <option value="Bristol" id="Abristol"> Bristol </option>
    <option value="Newcastle" id="Anewcastle"> Newcastle </option>
    <option value="Manchester" id="Amanchester"> Manchester </option>
    <option value="London" id="Alondon"> London </option>
    <option value="Glasgow" id="Aglasgow"> Glasgow </option> 
    </select>

We have tried multiple different ideas of JavaScript but can only get it to block out one or all options in the second drop down box.

Here is one of the long ideas of javascript click here Jfiddle I stored it in Jfiddle but don't actually know how to work it so it doesn't run sorry for being pretty useless

Thanks in advance.

Answer 1

https://jsfiddle.net/bt4v846c/1/

$("#Abristol").prop('disabled', true);
$("#Anewcastle").prop('disabled', true);

As a sidenote, disabled is it's own property and not put in the ID field.

Relevant question: Disable Drop Down Option using jQuery

Answer 2

You could remove the option from the dropdown based on a variable in my example its value.

 $(document).ready(function(){
    var value = "London";
    $("#arrive option[value='"+value+"']").remove();
  });

Answer 3

Here is an interesting solution using my favorite, and often underutilized, conditional statement switch . You are going to want to disable destination dynamically based on the selection in the departure select element, hence the use of an on change handler and simple switch statement to delegate who should be disabled.

JQuery

$('#leave').on('change', function () {
$('#arrive').children('option').prop('disabled', false);

switch ($(this).val()) {

    case "Bristol":
        $("#Abristol").prop('disabled', true);
        break;

    case "Newcastle":
        $("#Anewcastle").prop('disabled', true);
        break;

    case "Manchester":
        $("#Amanchester").prop('disabled', true);
        break;

    case "London":
        $("#Alondon").prop('disabled', true);
        break;

    case "Glasgow":
        $("#Aglasgow").prop('disabled', true);
        break;
   }
});

Check out the working: JSFiddle

NOTE: a larger, or rather a lengthier select element may call for a for loop for both robusticity and concision.