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

Question

在我的 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>

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

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

Answer 1

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

尝试就地设置

$select.hide()

使用

$select.prop('disabled', true)