選択フィールドの動的に生成されたオプションをどのように再入力しますか?
-
03-07-2019 - |
質問
背景 継続時間と頻度という2つの選択フォームフィールドが連鎖しています。ユーザーが周波数を選択すると、期間オプションが動的に挿入されます。デフォルトのオプションがありますが、これらはユーザーがフィールドを展開したときにフィールドが空にならないようにするためのものです。
たとえば、頻度のオプションは「日」、「他の日」、「週」です。 「日」を選択すると、頻度のオプションが「5日」、「15日」、「30日」に変わります。
問題 ユーザーがエラーのあるフォームを送信すると、フォームがすべてのフォームフィールドに再入力されて返され、エラーが強調表示されます(頻度選択フィールドを除く)。オプションは動的に生成されます。強調表示されておらず、オプションがデフォルトのオプションです。
ユーザーがエラーで送信した場合にこれらのオプションを再入力できる方法はありますか。私たちはかなりのJavaScript検証を行っているので、このような状況はそれほど頻繁に起こるべきではありませんが、エラーをユーザーにできる限り簡単に体験できるようにしたいと思います。
コード 私はjqueryとcascadeと呼ばれるjqueryプラグインを使用して、2つのフィールドを連結しています。 ( http://plugins.jquery.com/project/cascade )
カスタムJavaScriptです。
このスクリプトはオプションのリストを生成します:
var list1 = [
{'When':'86400','Value':' ','Text':' '},
{'When':'172800','Value':' ','Text':' '},
{'When':'604800','Value':' ','Text':' '},
{'When':'86400','Value':'432000','Text':'5 days'},
{'When':'86400','Value':'1296000','Text':'15 days'},
{'When':'86400','Value':'2505600','Text':'30 days'},
{'When':'172800','Value':'1296000','Text':'15 days'},
{'When':'172800','Value':'2505600','Text':'30 days'},
{'When':'172800','Value':'3888000','Text':'45 days'},
{'When':'604800','Value':'2505600','Text':'4 weeks'},
{'When':'604800','Value':'3715200','Text':'6 weeks'},
{'When':'604800','Value':'4924800','Text':'8 weeks'}
];
function commonTemplate(item) {
return "<option value='" + item.Value + "'>" + item.Text + "</option>";
};
function commonMatch(selectedValue) {
return this.When == selectedValue;
};
そして、これは選択オプションの生成をトリガーするスクリプトです:
jQuery("#duration).cascade("#frequency",{
list: list1,
template: commonTemplate,
match: commonMatch
})
質問 フォームがエラーでブラウザに返されたときに、動的に生成された周波数オプションを取得して再入力する方法についての考えはありますか?現在使用しているカスケードプラグインまたは他の方法を使用できますか?
ヘルプは大歓迎です。 :-)
解決
私はこのプラグインに精通していませんが、 #duration
および/または #frequency の
change()
イベントを発生させることはできませんでしたcode。on document.ready?
$(document).ready(function() {
$('#duration').change();
$('#frequency').change();
});
すべてのスクリプトが行っていることは、selectのchangeイベントに(少なくともデフォルトで)ものをバインドしているので、プラグインをトリガーしてその魔法を動作させるはずです...