Friday 15 June 2012

jquery - Block certain options in a HTML drop down box using Javascript -


I know that this is the question or it has been asked in a similar way though I can not find a suitable answer. I am creating a website where people can book just trips I have two drop down boxes, I want this with both places when a certain departure is chosen, only a few places are enabled within the destination drop down box. For example, if London is selected in the first drop down, you can not choose either London or any of the locations where just another She does not travel under the drop.

Here's our HTML

  & lt; B & gt; Departure: & lt; / B & gt; & Amp; Nbsp; & Lt; Select name = "leave" id = "leave" required & gt; & Lt; Option value = "" selected id = "disabled" & gt; - Select - & lt; / Options & gt; & Lt; Option value = "bristol" id = "lbristol" & gt; Bristol & lt; / Options & gt; & Lt; Option value = "Newcastle" id = "Lnewcastle" & gt; Newcastle & lt; / Options & gt; & Lt; Option value = "Manchester" id = "Lmanchester" & gt; Manchester & lt; / Options & gt; & Lt; Option value = "London" id = "London" & gt; London & lt; / Options & gt; & Lt; Option value = "glasgow" id = "lolgso" & gt; Glasgow & lt; / Options & gt; & Lt; / Select & gt; & Lt; P & gt; Destination: & lt; / B & gt; & Amp; Nbsp; & Lt; Select name = "access" id = "access" is required & gt; & Lt; Option value = "" selected id = "disabled" & gt; - Select - & lt; / Options & gt; & Lt; Option value = "bristol" id = "abristol" & gt; Bristol & lt; / Options & gt; & Lt; Option value = "newcastle" id = "analcastle" & gt; Newcastle & lt; / Options & gt; & Lt; Option value = "Manchester" id = "Amanchester" & gt; Manchester & lt; / Options & gt; & Lt; Option value = "London" id = "Alondon" & gt; London & lt; / Options & gt; & Lt; Option value = "Glasgow" id = "agglosgo" & gt; Glasgow & lt; / Options & gt; & Lt; / Select & gt;  

We have tried many different javascript ideas, but it can only be found to block one or all of the other options in the second drop down box.

Here's one of the long ideas for Javascript click here I store it in Juffield but in reality it does not know how to work, so it will not regret to be very useless

Thanks in advance.

Here's my favorite, and often included, conditional statement by using switch An interesting solution is You want to disable destination dynamically based on the selection in the Departure Selection element, therefore use the change on one Header and the simple switch statement should disable

JQuery

  $ ('Leave'). Switch ($ (this) .val ()) {case "bristol": $ ("#bristol") ('change', function () {$ ('# arrival') prop ('disabled', wrong); Prop ('disabled', true) ("disabled", true); break; case "Manchester": $ ("# amsterdam") .prop ('incompetent', true); break; 'London' ': $ ("Disabled", true); break; case "glasgogo": $ ("#aglagosgo") .prop ('incompetent', true); break;}});  

Check the job:

Note: Select a larger, or a long The element can call for a loop for both the strength and interest.


No comments:

Post a Comment