如何使用jQuery在下拉列表中添加/删除值

Question

我有2个具有相同值的下拉列表，并且这些值由数据库值填充。 我要解决的问题是，提交表单时2个下拉框不能具有相同的值。 POST值必须不同。

如果用户从下拉框A中选择选项A，我想从下拉框B中删除选项A。如果用户然后从下拉框A中选择选项B，我希望将选项A放回下拉框B，然后从下拉框B中删除的新值选项B。

我尝试了几种不同的方法来执行此操作，最接近的是以下代码。 当页面加载时，此位可以满足我的要求。

$(document).ready(function() {
    $.dropdownAcache = { 
        val : "",
        val1 : "",
    };

    $('#id_A').ready(function() {
        var optionval = $('#id_A').val();
        $.dropdownAcache.val = $('#id_A').val();
        $('#id_B > option[value=' + optionval + ']').remove();
    });

    $('#id_A').click(function() {
        var optionval = $('#id_A').val();
        $.dropdownAcache.val1 = $('#id_A').val();
        $('#id_B > option[value=' + optionval + ']').remove();
        $('#id_B').append$(dropdownAcache.val);
        $.dropdownAcache.val = $.dropdownAcache.val1;
    });

....但它似乎要做的就是从下拉框B中删除值，但从不将这些值重新添加回去。这实际上很可笑，因为我最终在下拉框B中没有值，但是，认真地说，任何人都可以帮助得到这个工作？

干杯-奥利

Answer 1

您应该使用的事件是“更改”事件。 另外，您不需要第二个.ready()回调，它没有任何作用（第一个.ready()处理）

$.dropdownAcache = { 
    val : "",
    val1 : ""
};

$(document).ready(function() {

    var optionval = $('#id_A').val();
    $.dropdownAcache.val = $('#id_A').val();
    $('#id_B > option[value="' + optionval + '"]').remove();

    $('#id_A').change(function() {
        optionval = $('#id_A').val();
        $.dropdownAcache.val1 = optionval;
        $('#id_B > option[value="' + optionval + '"]').remove();
        $('#id_B').append( $.dropdownAcache.val );
        $.dropdownAcache.val = $.dropdownAcache.val1;
    });
});

（至于为什么您的列表从不回加值，不幸的是您有错字.append$(dropdownAcache.val); ）