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

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

这是我们的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中，但实际上不知道如何使用它，所以它不会因为非常无用而运行

提前谢谢

作为旁注，disabled是它自己的属性，不放在ID字段中

---

相关问题：

您可以根据我的示例中的变量及其值从下拉列表中删除该选项

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

---

下面是一个有趣的解决方案，它使用了我最喜欢的条件语句开关，但常常没有得到充分利用。您将希望根据出发选择元素中的选择动态禁用目的地，因此使用on-change处理程序和简单的switch语句来委托应该禁用的人

JQuery

查看工作日志：

注: 一个更大的，或者更长的select元素可能需要一个for循环来实现健壮性和简洁性

---

你不可能真正做到让用户理解发生了什么。我建议使用AJAX根据出发点选择为目的地加载新值。您可以将禁用属性添加到不应选择的属性。我们尝试了多种不同的JavaScript想法。。。告诉我们，我们会告诉你出了什么问题。我已经添加了一个链接到一个jfiddle页面，其中显示了我们所看到的javescript想法used@Peril95看看下面我的答案。这就是你想要做的吗？或者您正在寻找一个独立于jQuery的替代方案。谢谢它在JS fiddle中工作，但我们无法使用notepadd++使其工作。不知什么原因，您有什么建议吗？e、 g某library@Peril95-不是100%确定，但请检查EMCAScript 5.1的最低JS语言版本，并确保导入jQuery 1.11.0或greater@Peril95-更正jQuery1.9.1或更高版本，但拥有最新的稳定版本不会有任何伤害。哈哈。@95-没问题。很高兴我能帮忙。一定要检查并验证我的答案。。。；

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

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