使用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字段中。

相關問題： 使用jQuery禁用下拉選項

Answer 2

您可以在示例中根據變量的值從下拉列表中刪除該選項。

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

Answer 3

這是一個有趣的解決方案，它使用了我最喜歡的並且經常未得到充分利用的條件語句switch 。 你將要動態地根據在出發選擇禁用目的地 select元素，因此對使用的change處理和簡單的switch語句來委派誰應該被禁用。

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

查看工作原理 ： JSFiddle

注意：一個更大或更長的select元素可能會要求for循環以提高魯棒性和簡潔性。