0

ユーザーが複数選択ボックスから別のボックスに項目を移動できるフォームがあります。私たちは MVC 4.5 を使用しており、jquery は Microsoft の控えめな JavaScript で検証します。

問題は、フォームを送信するときに、選択ボックス内の値が送信されないことです。これは、アイテムを移動した後、送信のためにそれらのすべてのアイテムも選択する必要があることをユーザーが知らないためです。

解決策は簡単に思えます。jquery を使用して、送信時にすべてのアイテムを選択します。

いくつかの調査を行った後 (stackoverflow コミュニティに感謝)、送信プロセスをインターセプトするために必要な jquery コードを発見することができました。ただし、コードが項目を選択するときに、選択ボックス内の既存の項目のみが選択されるという問題が発生します。移動されたライブ (動的) アイテムは選択されません。

最初に使用したコードは次のとおりです。

$('#UserProfileForm').bind('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

bind を使用しても機能しないことがわかりましたが、live では次のように動作する必要があります。

$('#UserProfileForm').live('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

ただし、jquery 1.9 を使用しており、ライブ機能は削除されています。これは次のように置き換えられました。

$(document).on('invalid-form.validate', 'form', function () {
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

ただし、これはまだ機能しません。そこで、選択機能をアラートに置き換えて、それがまったく機能するかどうかを確認しました。

$(document).on('invalid-form.validate', 'form', function () {
    alert('test');
});

アラートはポップアップしません。何か案は？

追加情報

なぜ私が invalid-form.validate を参照しているのか疑問に思っている人にとっては、無効なフォーム データでテストしているためです。有効なフォーム データである場合、同じシナリオが適用されます。ライブデータを有効なフォーム送信プロセスにバインドする方法についても、私は要点に達していません。

4

1 に答える 1

-1

要素を調べた後、jquery が選択された属性をオプションに追加していることに気付きました。ただし、オプションは強調表示されませんでした。これにより、選択した属性を追加するための jquery 呼び出しが間違っているのではないかと考えました。

いくつかの実験の後、私はそれが間違っていることを発見しました。jquery の attr 関数を使用すると、実際には DOM でオプションが selected に設定されないようです。prop関数を使用するとそうです。

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

$(document).on('submit', 'form', function (e) {
    $(this).find('.selectbox option').each(function (i) {
        $(this).prop("selected", true);
    });
});

これにより、送信ハンドラーが有効かどうかに関係なく、フォームの送信時に選択されたすべてのオプションをフォームで選択できます。無効な情報に基づいて選択したいだけの場合は、これを使用します。

$('form').bind('invalid-form.validate', function () {
    $(this).find('.selectbox option').each(function (i) {
         $(this).prop("selected", true);
    });
});

楽しみ！

于 2013-09-24T20:34:28.333 に答える