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.

You can't really do that in a way where the user would understand what's going on. I would recommend loading new values for the destination based on the departure selection using AJAX. — Coda17, Mar 17 '15 at 20:24
You can add disabled attribute to ones which are not supposed to be selected. — Sam, Mar 17 '15 at 20:25
*"We have tried multiple different ideas of JavaScript..."* Show us, we will tell you what's wrong. — Karl-André Gagnon, Mar 17 '15 at 20:26
I have added a link to a jfiddle page which shows the javescript idea we used — Peril95, Mar 17 '15 at 20:51
@Peril95 check out my answer below. Is that what you are looking to do? or are you looking for a jQuery independent alternative. — Travis Clarke, Mar 17 '15 at 21:01

score 2 · Answer 1 · edited May 23 '17 at 12:06

2

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

edited May 23 '17 at 12:06

Community

1
1

answered Mar 17 '15 at 20:26

Boren

101
4

score 0 · Answer 2 · answered Mar 17 '15 at 20:31

0

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();
  });

answered Mar 17 '15 at 20:31

floor

1,519
11
24

Travis Clarke · Accepted Answer · 2015-03-17T21:05:10.693

0

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.

edited Mar 17 '15 at 21:05

answered Mar 17 '15 at 20:56

Travis Clarke

5,951
6
29
36

Thanks it works in JS fiddle but we cannot get it to work using notepadd++ some reason, have you got any suggestions? e.g a certain library – Peril95 Mar 17 '15 at 21:24
@Peril95 - Not 100% sure but check for a minimum JS language version of EMCAScript 5.1 and be sure to import jQuery (1.11.0 or greater) – Travis Clarke Mar 17 '15 at 21:29
@Peril95 - **correction** jQuery(1.9.1 or greater), but it never hurts to have the most recent stable version. lol. – Travis Clarke Mar 17 '15 at 21:32
@Peril95 - No problem. Glad I could help. Be sure to check validate my answer...;) – Travis Clarke Mar 17 '15 at 21:34

Block certain options in a HTML drop down box using Javascript

3 Answers3