1

私のMVC3プロジェクトとは別に、それぞれ3つのセキュリティの質問と回答（ドロップダウンリストの約10）を含むページを設計しました。ドロップダウンリストから質問を選択すると、その下のテキストボックスに回答が入力されます。

デザイン：ユーザーがquestion1を（1/10）の質問として選択した場合を考えてみましょう。2番目のドロップダウンには、9つの質問のみが表示されます（最初の質問はスキップします）。同様に、3番目の質問には8つのオプションしかありません。

同様に、ユーザーがインデックスを0に変更した場合（これは質問の選択を意味します）。彼が削除したその質問は、他のドロップダウンリストに表示されます。

このページのデザインにご協力ください。JQueryを使ってみましたが、役に立ちませんでした。

4

2 に答える 2

3

このコードを試してください

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

ワーキングデモ

于 2012-09-28T01:04:27.383 に答える
2

Knockoutを使用します。基本的に、利用可能な質問を返すJavaScriptビューモデルを作成します。

私にも同様の要件があり、次のことが機能しました。

http://jsfiddle.net/mbest/wfW97/

参照用のコードは次のとおりです。

function ViewModel() {
    var self = this;
    self.colors = ['red','orange','yellow','green','blue','indigo','violet'];
    self.selections = [];
    ko.utils.arrayForEach(self.colors, function() {
        self.selections.push(ko.observable());
    });
    self.selfAndUnselectedColors = function(index) {
        var selfColor = self.selections[index]();
        return ko.utils.arrayFilter(self.colors, function(color) {
            return color === selfColor || !ko.utils.arrayFirst(self.selections, function(sel) {
                return color === sel();
            });
        });
    }
}

ko.applyBindings(new ViewModel());

そしてHTML：

<div data-bind="repeat: colors.length">
    <select data-bind="options: selfAndUnselectedColors($index), optionsCaption: 'select a color', value: selections[$index]"></select>
</div>​
于 2012-09-27T23:40:24.653 に答える