2016-03-25 9 views
1

に基づいて、私は国のセットを示しています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要素だけがデータを送信できるように、これをどのようにリファクタリングすることができますか?

+0

を設定する代わりに

してみてください。あるいは、データ属性としてフィールドの名前を各選択可能な項目に追加し、JQueryだけが、例えば、 addClass( 'js-show') ' – DBS

答えて

1

これは、使用されていない選択を非表示にするだけなので、無効にしておくとその要素はサーバーに送信されません。代わりに `switch文は、あなたのコードをクリーンアップするでしょうelseif`だの負荷を持っていることの

$select.hide() 

使用

$select.prop('disabled', true) 
+0

これでやるよ。ありがとう。 –

+0

あなたの歓迎:) – cralfaro

関連する問題