jquery dropdownlist如果在第二個下拉列表中選擇了隱藏值

好吧，我有兩個下拉菜單我希望下拉菜單中的選定項目隱藏在下拉菜單中，反之亦然。jquery dropdownlist如果在第二個下拉列表中選擇了隱藏值

我已經做了以下至今似乎無法弄清楚最後一步是希望一隻手。

我目前有什麼是我有兩個附加到下拉列表和附加到這些列表循環並將值附加到下拉列表，然後檢查更改事件，當發生這種情況時，我從下拉列表中刪除值根據其指數。

我目前在selectedIndex上刪除，我想刪除selectedValue，而不是索引，但無法把握這一點。

<script type="text/javascript"> 

    var fromCurrencies = { 

     FRO : 'Convert this currency', 
     AUD : 'AUD, Australian Dollar', 
     NZD : 'NZD, New Zealand Dollar', 
     EUR : 'EUR, Euro', 
     USD : 'USD, United States Dollar', 
    }; 

    var toCurrencies = { 
     TOC : 'To this currency', 
     AUD : 'AUD, Australian Dollar', 
     NZD : 'NZD, New Zealand Dollar', 
     EUR : 'EUR, Euro', 
     USD : 'USD, United States Dollar', 
    }; 

    $(document).ready(function() { 

     var ddFrom = $(".ddConvertFrom"); 
     $.each(fromCurrencies, function (val, text) { 
      ddFrom.append(
       $('<option></option>').val(val).html(text) 
      ); 
     }); /*End ddFrom loop*/ 

     var ddTo = $(".ddConvertTo"); 
     $.each(toCurrencies, function (val, text) { 
      ddTo.append(
       $('<option></option>').val(val).html(text) 
      ); 
     }); /*End ddTo loop*/ 


    }); /*End document.ready function*/ 

    function doAction(){ 

     if ($('.ddConvertFrom').val == "" || $('.ddConvertFrom').get(0).selectedIndex == 0) { 
      //Do nothing or hide...? 
     } else { 
      /*Hide selected value from other dropdown*/ 
      var index = $('.ddConvertFrom').get(0).selectedIndex; 
      $('.ddConvertTo option:eq(' + index + ')').remove(); 
     } 

    } 

</script>

的HTML：

<div class="selectstyler"> 
    <asp:DropDownList ID="ddConvertFrom" OnChange="doAction()" CssClass="ddConvertFrom" runat="server"></asp:DropDownList> 
</div> 

<div class="selectstyler"> 
    <asp:DropDownList ID="ddConvertTo" CssClass="ddConvertTo" runat="server"></asp:DropDownList> 
</div>

來源

2012-06-11 Anicho

試試這個，而不是使用的onChange的屬性，你可以使用change事件處理函數。

$('select:first').change(function(){ 
      /*remove selected value from other dropdown*/ 
      var txt = $(this).val(); 
      $('.ddConvertTo option[value=' + txt + ']').remove(); 
})

http://jsfiddle.net/ue4Cm/1/

來源

2012-06-11 21:50:33 undefined

爲此，爲了更好，每當觸發evet時應該填寫ddl。 – ocanal

@FrançoisWahl是的，當然需要一個'：first'選擇器。 – undefined

@FrançoisWahl有沒有在代碼中的其他問題？ – undefined

純粹的完整性，從undefined添加到一個已經工作的答案。

爲了解決反之亦然和擴展的問題，重新添加包括自動選擇前值的值，如果它存在，請參閱：

爲我你原來的劇本進行的更改，請參閱下文。

我確信下面的代碼可以在幾個層次上進行優化，但我只是試圖讓它首先工作。使它漂亮我離開你:)

要開始我重新考慮你的代碼，所以值附加在各自的方法。現在，在重新添加值之前，下拉列表已完全清除。

首先雖然我們記錄了當前選擇的選項的值，以確保我們可以重新選擇它，如果它存在。爲它增加更多動態感覺並保存用戶表單手動重新選擇。

參見例如附着值的從-下拉：

function attachFromValues() { 
    var ddFrom = $(".ddConvertFrom"); 
    var selectedValue = ddFrom.val(); 
    var selectedIndex = 0; 

    ddFrom.html(""); 
    var index = 0; 
    $.each(fromCurrencies, function(val, text) { 
     ddFrom.append(
     $('<option></option>').val(val).text(text)); 

     if (selectedValue == val) { 
      selectedIndex = index; 
     } 

     index++; 
    }); /*End ddFrom loop*/ 

    if (selectedIndex > 0) { 
     ddFrom.get(0).selectedIndex = selectedIndex; 
    } 
};

我也重新分解，其去除在其它下拉調用新的再分解的方法來重新連接所有值的值的代碼首先刪除特定的值。這可以確保您在一段時間後不會結束空白下拉菜單。

見例如change事件到下拉的：
（從undefined的答案出現，只有加入呼叫重新填充）

$('select.ddConvertTo').change(function() { 
    if ($('.ddConvertTo').val == "") { 
     //Do nothing or hide...? 
    } else { /*Hide selected value from other dropdown*/ 
     attachFromValues(); 
     var txt = $(this).val(); 
     $('.ddConvertFrom option[value=' + txt + ']').remove(); 
    } 
})

有關完整的代碼更改檢查連接的

編輯（25君2012）
更新的代碼，因爲我注意到一個不一致的情況，即如果默認選擇（索引0）被創建，貨幣不能正確設置。此代碼的最新版本現在可以正確重新綁定貨幣。

來源

2012-06-11 22:35:05 Nope

謝謝你的幫助：D – Anicho

jquery dropdownlist如果在第二個下拉列表中選擇了隱藏值

回答

相關問題