AJAX 请求后更新选择选项答案

【问题标题】：Updating select options after AJAX requestAJAX 请求后更新选择选项
【发布时间】：2023-03-14 02:09:01
【问题描述】：

我的选择字段看起来像这样：

<?= $form->field($place, "[{$index}]id")->widget(Select2::classname(), [
    'data' => ArrayHelper::map(PresentationPlace::find()->all(), 'id', 'displaynew'),
    'class' => 'field',
    'options' => ['placeholder' => Yii::t('app', 'Pick place for presentation')],
    'pluginOptions' => [
        'allowClear' => false
    ],
])->label(Yii::t('app', Yii::t('app', 'Place'))) ?>

在该字段之后，我有添加新地点的简短表格 - 您可以填写并发送 AJAX 请求。它将这个地方添加到我的数据库中。我希望在 AJAX 请求完成后更新我的选择选项 - 在添加每个新位置后，这些选项都是最新的。如何在 Yii 2 中实现这一点？

【问题讨论】：

你应该在这里找到你的答案：stackoverflow.com/questions/6364748/…
@Oliver 不幸的是，我在那里找不到任何问题的答案。我想 Yii 不允许我以如此简单的方式添加选择选项。
当你从列表中选择你需要发送ajax请求？你的问题就是这个意思吗？

标签： javascript jquery ajax yii2 select2

【解决方案1】：

Yii 2 是一个 PHP 框架，因此在服务器端运行。您必须更改客户端选择中的选项。查看您问题的标签，我假设您使用的是 jQuery。给定一组选项，这就是您可以更新选择中的选项的方式。我将假设您通过 AJAX 调用获得了这些方面的信息。如果您的 AJAX 调用返回 JSON，您可以使用 JSON.parse 获取对象。

jQuery

var options = {
      apple: 'Apple',
      banana: 'Banana',
      pear: 'Pear'
    },
    $select = $('select');

$('button').on('click', function() {
  $select.find('option').remove();
  $.each(options, function(value, name) {
    $select.append($('<option />', {value: value, text: name}));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>
<button>Change options</button>

如果您正在使用select2，请在更新选项后不要忘记致电$select.trigger('change')。这将更新下拉列表。如果你根本不使用 jQuery，你可以使用下面的代码。

原生 JavaScript

var options = {
      apple: 'Apple',
      banana: 'Banana',
      pear: 'Pear'
    },
    select = document.querySelector('select');

document.querySelector('button').addEventListener('click', function() {
  // remove current options
  while (select.firstChild) {
    select.removeChild(select.firstChild);
  }
  
  // insert new ones
  Object.keys(options).forEach(function(value) {
    var option = document.createElement('option');
    option.setAttribute('value', value);
    option.innerHTML = options[value];
    select.appendChild(option);
  });
});

<select>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>
<button>Change options</button>

在服务器端，您只需要确保 query 您的数据库中存储的选项，并将其作为 options 传递，而不是您现在拥有的占位符。

希望对您有所帮助。

【讨论】：