根據以前的下拉選擇顯示/隱藏下拉項目

- - 編輯爲我第一次描述錯誤，對不起！ - -根據以前的下拉選擇顯示/隱藏下拉項目

嗨，

我試圖使用顯示/隱藏操縱什麼是在第二個下拉菜單中顯示的基礎上，什麼是在第一個下拉菜單中選擇。然而，在簡單工作之後，它現在不會跨越任何瀏覽器，只是將它們全部顯示出來，而不管選擇什麼。 當在第一個菜單中選擇一個選項時，它需要在第二個菜單中顯示特定的選項。每個機場都有自己的目的地。不幸的是，不是這樣的PHP/MySQL的數據庫選項：/

的JS如下：

$(document).ready(function(){ 

$("#from_BLANK").click(function() { 
     $("#to_A1").show(); 
     $("#to_A2").show(); 
     $("#to_A3").show(); 
    }); 
    $("#from_A1").click(function() { 
     $("#to_A1").hide(); 
     $("#to_A2").show(); 
     $("#to_A3").show(); 
    }); 
    $("#from_A2").click(function() { 
     $("#to_A1").show(); 
     $("#to_A2").hide(); 
     $("#to_A3").show(); 
    }); 
    $("#from_A3").click(function() { 
     $("#to_A1").show(); 
     $("#to_A2").show(); 
     $("#to_A3").hide(); 
    }); 
});

和HTML的下拉列表如下：

<select name="depApt" id="depApt"> 
    <option id="from_BLANK" selected="selected">&nbsp;</option> 
    <option id="from_A1" value="A1">Airport One</option> 
    <option id="from_A2" value="A2">Airport Two</option> 
    <option id="from_A3" value="A3">Airport Three</option> 
</select> 

<select name="dstApt" id="dstApt"> 
    <option id="to_BLANK" selected="selected">&nbsp;</option> 
    <option id="to_A1" value="A1">Airport One</option> 
    <option id="to_A2" value="A2">Airport Two</option> 
    <option id="to_A3" value="A3">Airport Three</option> 
</select>

是有什麼明顯的錯誤？或者更好的方法來實現這一目標？

任何和所有幫助最受讚賞！

歡呼聲，保羅

來源

2010-01-12 Paul S

下面是腳本，它可以防止兩個下拉菜單都是空白的。如果選擇了A中的相應選項，則B中的選項將始終被禁用。

測試IE8和FF3.5和Chrome。

的Javascript：

<script type="text/javascript" > 
    $(function() { 
    $('#depApt').click(function(){ 
     var idx = $(this).attr("selectedIndex") + 1; 
     $('#dstApt option').removeAttr('disabled'); 
     if($('#dstApt').attr("selectedIndex") == idx - 1) 
      $('#dstApt').attr("selectedIndex", 0) 
     $('#dstApt option:nth-child(' + idx + ')').attr('disabled', 'disabled'); 
     } 
    ); 
    }); 
    </script>

HTML：

<select name="depApt" id="depApt"> 
    <option>&nbsp;</option> 
    <option value="A1">Airport One</option> 
    <option value="A2">Airport Two</option> 
    <option value="A3">Airport Three</option> 
</select> 

<select name="dstApt" id="dstApt"> 
    <option>&nbsp;</option> 
    <option value="A1">Airport One</option> 
    <option value="A2">Airport Two</option> 
    <option value="A3">Airport Three</option> 
</select>

PS：我已刪除的，因爲他們並不需要我的代碼的選項所有的ID，如果需要恢復回來。

來源

2010-01-12 11:00:40

完美的工作！雖然它現在突出了我的錯誤在描述:( 這不是我需要隱藏的選項，但選擇機場在第一個框需要然後顯示在第二個框中的特定選項！好東西填補我的第一篇文章在這裏:( – 2010-01-12 11:11:06

隱藏該選項將無法在所有瀏覽器上工作，禁用它們會。至於您實際的全部要求，我的方法只會在您將所有可能的選項放在裏面然後使用您自己的規則禁用/啓用它們。有一件事是肯定的，你可以飛到同一個地方。:) – 2010-01-12 11:14:02

看看這個答案我給了一個類似的問題：

Removing and adding options from a group of select menus with jQuery

應該完全爲你工作，而我也在最後提供了一個鏈接到一個工作示例。

來源

2010-01-12 10:40:11

謝謝:)當選項值只是文本而不是整數時，仍然可以工作嗎？我不能做val> 0，因爲你在那裏：/ – 2010-01-12 10:46:34

@Paul S，是的，這個方法可以工作，你只需要調整一下邏輯。您可以使用'val！='to_BLANK''來代替'val> 0'。 – 2010-01-12 11:15:02

根據以前的下拉選擇顯示/隱藏下拉項目

回答

相關問題