jquery - 根据之前的下拉列表更新下拉列表

除了我的MVC3项目之外，我们还设计了一个页面，该页面分别包含3个安全问题和答案（下拉列表中大约10个问题）。可以从下拉列表中选择问题，答案将填写在其下方的文本框中。

设计：
让我们说，如果用户选择问题1作为（10个中的1个）问题。第二个下拉列表应仅显示9个问题（跳过第一个问题）。以同样的方式，第三个问题将只有8个选项。

同样，如果用户将索引更改为0（表示选择问题）。他删除的那个问题应该出现在其他下拉列表中。

请帮助设计此页面。我尝试使用JQuery，但并没有帮助我。

最佳答案

试试这个代码

$(function() {
    // Load all the dropdowns
    $('[id^=select]').html($('.template').html());
    // This array Holds the Objects
    var arr = ['select1', 'select2', 'select3'];
    // Declare a array where you store the selections
    var arrSelect = {
        'select1': '0',
        'select2': '0',
        'select3': '0'
    };

    $('select').on('change', function() {
        var currID = $(this).prop('id');
        // Set the Current selection
        arrSelect[currID] = $(this).val();
        // Iterate Thru each dropdown
        $.each(arr, function(i) {
            var temp = arrSelect[arr[i]];
            // Clone the template
            var $clone = $('.template').clone();
            // Remove Questions from template based on selected
            // values in other select's
            $.each(arrSelect, function(index, value) {
                if (value != 0 && value != temp) {
                    $clone.find('option[value=' + value + ']').remove();
                }
            });
            // If not Current select rewrite its
            // contents of the select
            if (arr[i] != currID) {
                //console.log('#' + arr[i] + ' :: ' + $clone.html());
                $('#' + arr[i]).html('').html($clone.html());
                $('#' + arr[i]).val(temp);
            }
        });
    });
})​

WORKING DEMO

关于jquery - 根据之前的下拉列表更新下拉列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12631350/