1

これはMVC3でも可能ですか?

最初にオプションが選択されたときに、2番目のドロップダウンでその値が非表示になるように、同じオプションで2つの異なるドロップダウンをフィルタリングしたい。

 $('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        $(this).toggle($(this).val() !== selectedValue);
    });
});​

http://jsfiddle.net/b4MjY/2/valuesすべてが同じ であれば、これはすべてうまくいきます。しかし、私が必要としているのは、値が異なっていても同じことをするということです。Textしたがって、またはIDオプションでフィルタリングし、そうではありませんvalue

ヘルパーを変更または作成せずに、MVC を介して何かを割り当てる方法があるかどうかはわかりません。

編集

おそらくinnerHTMLオプションから値を取得し、その値でフィルタリングすることは可能ですか?

更新 助けてくれたすべての人に感謝します!

これは、可能な限り最も単純な解決策として最終的に機能したものです。 http://jsfiddle.net/b4MjY/23/

リストされているすべてのソリューションはさまざまな場合に適していますが.

4

4 に答える 4

1

最初にオプションが選択されたときに、2番目のドロップダウンでその値が非表示になるように、同じオプションで2つの異なるドロップダウンをフィルタリングしたいと思います。

私は以前のstackoverflowの質問でこれをいじってみましたが、これがうまく機能することがわかりました。まさにそれを行う以下のデモを参照してください。ドロップダウンの値を非表示にし、別のドロップダウンで選択します。

デモ-別のドロップダウンで選択されているドロップダウンの値を非表示にする

これはMVC3で可能です。必要なのは、JavaScriptを使用して完全なリストのコピーを作成し、それを配列に格納することだけです。

次に、removeSelected以下に示すようなコードを使用して、指定されたリストの選択された値を取得し、指定されたターゲットリストから削除できます。

このメソッドは、完全なリストのローカルコピーを使用して、アイテムを削除する前にリストを「再入力」して、選択されていないアイテムが再度追加されるようにします。

MVC3を使用するかどうかに関係なく、JavaScript/jQueryを使用してアイテムを削除する機能は変わりません。MVC3は単にアイテムのリストを提供します。

追加するだけで、このために各アイテムのID値は必要ありません。それらがすべて固有のテキストを持っている場合、あなたは大丈夫です。以下に示すように、私はとにかくIDを無視して値でのみ一致しています。

var $ddl1 = $("#ddl1");
var $ddl2 = $("#ddl2");

var employees = [
    { Id: 0, Name: "Michael Jordan"},
    { Id: 1, Name: "Magic Johnson"},
    { Id: 2, Name: "Larry Bird"},
    { Id: 3, Name: "Some Guy"},
    { Id: 4, Name: "Another Dude"}
];


function resetEmployee($selectElement) {
    $selectElement.empty();

    employees.forEach(function(employee) {
        $selectElement.append('<option value="' + employee.Id + '">' + employee.Name + '</option>');
    });
};

resetEmployee($ddl1);
resetEmployee($ddl2);

removeSelected($ddl1, $ddl2);
removeSelected($ddl2, $ddl1);

function removeSelected($sourceSelect, $fromSelect) {
    var fromSelectedValue = $fromSelect.val();
    resetEmployee($fromSelect);

    $fromSelect.find('option[value="' + $sourceSelect.val()  + '"]').remove();
    $fromSelect.val(fromSelectedValue);
};

$ddl1.on('change', function(){
    removeSelected($ddl1, $ddl2);
});

$ddl2.on('change', function(){
    removeSelected($ddl2, $ddl1);
});
于 2012-10-19T12:41:09.247 に答える
1

わかりました、私はあなたの問題が好きで、将来そのようなものを実装するかもしれないので、ここにプラグインのようなスクリプトがあります. 実際の例

基本的に、"mutual-exclusion"値を一意にするすべてのドロップダウンにクラスを追加するだけです。これは、スクリプトがスローされた任意の数のドロップダウンに対して機能し、実際の例には 3 つあることを意味します。もちろん、最も単純なケースであるため、2 つだけで問題ありません。

また、無効にする代わりに非表示にしたい場合 (私が好む) 、この例でその方法を確認できます

基本的には2つのケースのみを変更しましたif ($curSelected.filter('option[value="'...

var $mutualExcludedDropdowns = $('.mutual-exclusion');
$mutualExcludedDropdowns.change(function() {
    var selectedValue = $(this).val();
    var curItem = $(this)
    var $curSelected = $('option:selected' , $mutualExcludedDropdowns);

    $mutualExcludedDropdowns.each(function(index, dropdownList) {
        if ($(curItem)[0]  !== $(dropdownList)[0])
        {
            $('option', $(dropdownList)).each(function(index, optionItem) {
                if ($curSelected.filter('option[value="' + $(optionItem).val() + '"]').length > 0)
                    {
                        $(optionItem).attr('disabled', 'disabled');
                    }
                    else
                    {
                        $(optionItem).removeAttr('disabled');
                    }
            });
        }
    });
});
于 2012-10-19T13:29:36.260 に答える
0

怠惰なコーディング：

$('#ddl1').change(function() {
    var selectedValue = $(this).val();
    $('#ddl2 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});
$('#ddl2').change(function() {
    var selectedValue = $(this).val();
    $('#ddl1 option').each(function() {
        if($(this).val() == selectedValue)
            { $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false);
        };
    });
});
于 2012-10-19T12:49:55.353 に答える
0

無効な属性を使用して、2番目のドロップダウンでオプションが選択されないようにすることができます

$('#ddl1').change(function() {
var selectedValue = $(this).val();
$('#ddl2 option').each(function() {
    if($(this).val() == selectedValue) $(this).attr('disabled',true);
    else $(this).attr('disabled',false);
});
});​

IEでは表示をnoneに設定できないため、.toggle（）またはhide（）オプションを使用することはできません。代わりに、オプションを.remove（）して、次の変更時に追加し直してください。

于 2012-10-19T12:40:43.767 に答える