基于previous dropdownlists更新的DropDownList [英] Updating dropdownlist based on previous dropdownlists

问题描述

除了我的MVC3项目，我们（在DropDownList 10左右），设计一个页面3的安全问题和答案分别。这些问题可以从DropDownList中进行选择，答案将在下面的文本框中填写。

Apart of my MVC3 project, we designed a page with 3 security questions and answers respectively (around 10 in the dropdownlist). The questions can be selected from the dropdownlist and the answer will be filled in the textbox below it.

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

Design: Let us say, if the user selected question1 as ( 1 of 10) questions. The second drop down should show only 9 questions(skipping the first question). and in the same way the 3rd question will have only 8 options.

在以相同的方式，如果用户改变了索引为0（这表示选择问题）。这个问题，这是他去掉应该出现在其他dropdownlists。

In the same way, if the user changes the index to 0 (which says select question). That question, which he removed should appear in the other dropdownlists.

请在设计这个页面的帮助。我尝试使用JQuery，这并没有帮助我。

Please help in designing this page. I tried using JQuery, which didn't help me out.

推荐答案

试试这个code

$(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);
            }
        });
    });
})​

工作演示

这篇关于基于previous dropdownlists更新的DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！