に基づいて、私は国のセットを示していますselect
フォームフィールドを持っています。各select
には、その国に一連の場所が表示されます。表示フォームフィールドが条件付きで私のLaravelアプリでユーザーの入力
{!! Form::select('site_id', $australia, null, ['class' => 'js-siteSelect select-australia', null => 'Select a user...']) !!}
{!! Form::select('site_id', $germany, null, ['class' => 'js-siteSelect select-germany']) !!}
{!! Form::select('site_id', $switzerland, null, ['class' => 'js-siteSelect select-switzerland']) !!}
{!! Form::select('site_id', $us, null, ['class' => 'js-siteSelect select-us']) !!}
{!! Form::select('site_id', $uk, null, ['class' => 'js-siteSelect select-uk']) !!}
、:
$('#js-countrySiteSelect').change(function(e) {
e.preventDefault();
$('.js-siteSelectLabel').addClass('js-show');
if ($(this).val() == 'United States') {
$('.js-siteSelect').removeClass('js-show');
$('.select-us').addClass('js-show');
} else if ($(this).val() == 'Australia') {
$('.js-siteSelect').removeClass('js-show');
$('.select-australia').addClass('js-show');
} else if ($(this).val() == 'Germany') {
$('.js-siteSelect').removeClass('js-show');
$('.select-germany').addClass('js-show');
} else if ($(this).val() == 'Switzerland') {
$('.js-siteSelect').removeClass('js-show');
$('.select-switzerland').addClass('js-show');
} else if ($(this).val() == 'United Kingdom') {
$('.js-siteSelect').removeClass('js-show');
$('.select-uk').addClass('js-show');
}
});
しかし、それぞれの場所のドロップダウンメニューがまだDOMにロードされているため、フォームは常に提出最後のselect
の最初のオプション - この例では、イギリスのドロップダウンリストです。
可視のselect
要素だけがデータを送信できるように、これをどのようにリファクタリングすることができますか?
を設定する代わりに
してみてください。あるいは、データ属性としてフィールドの名前を各選択可能な項目に追加し、JQueryだけが、例えば、 addClass( 'js-show') ' – DBS