根据用户输入有条件地显示表单字段答案

【问题标题】：Show form fields conditionally based on user input根据用户输入有条件地显示表单字段
【发布时间】：2016-07-13 07:13:06
【问题描述】：

在我的 Laravel 应用程序中，我有一个 select 表单字段，其中列出了一组国家：

<select id="js-countrySiteSelect">
    <option>Select Your Country</option>
    <option>United States</option>
    <option>Australia</option>
    <option>Germany</option>
    <option>Switzerland</option>
    <option>United Kingdom</option>
</select>

在此之下，我还有一系列选择表单域。每个select 都显示该国家/地区的一系列位置。

{!! 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 元素提交数据？

【问题讨论】：

switch 语句不会加载elseif，而是会清理您的代码。或者更好的是，将字段的名称作为数据属性添加到每个可选项目中，然后只使用 JQuery 选择匹配的项目，例如$(".select[data-country='Australia']").addClass('js-show')

标签： javascript php jquery forms laravel

【解决方案1】：

这是因为您只是隐藏了未使用的选择，如果您将它们标记为禁用，则元素将不会发送到服务器。

尝试到位设置

$select.hide()

使用

$select.prop('disabled', true)

【讨论】：

是的，就可以了。谢谢。
@cralfaro 你是隐藏它并禁用它还是只是禁用它？
@Marvin 禁用它