javascript - 使用 Javascript 阻止 HTML 下拉框中的某些选项

Question

我知道这个问题或类似问题已被问过几次，但我找不到合适的答案。我正在创建一个网站，人们可以在其中预订巴士行程。我有两个下拉框，它们的位置相同。我希望这样当选择某个出发地时，仅启用目的地下拉框中的某些位置。例如，如果在第一个下拉列表中选择伦敦，则您无法在第二个下拉列表中选择伦敦或巴士不前往的任何地点。

这是我们的 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>

我们尝试了多种不同的 JavaScript 想法，但只能让它屏蔽第二个下拉框中的一个或所有选项。

这里是 javascript 的长篇大论之一，点击这里Jfiddle我将它存储在 Jfiddle 中，但实际上不知道如何使用它，所以它不会因为毫无用处而运行抱歉

提前致谢。

Answer 1

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

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

顺便说一句，disabled 是它自己的属性，不放在 ID 字段中。

相关问题:Disable Drop Down Option using jQuery