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>

在此之下，我还有一系列选择表单字段。每个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元素提交数据？

Answer 1

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

尝试设置

$select.hide()

使用

$select.prop('disabled', true)

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

1 个答案: