Question

我有选择字段：

<?= $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中实现这一目标？

Answer 1

Yii 2是一个PHP框架，因此可以在服务器端运行。您必须更改客户端选择中的选项。看看你的问题的标签，我假设你正在使用jQuery。在给定一组选项的情况下，这是如何更新select中的选项的方法。我将假设您通过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，可以使用以下代码。

vanilla 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而不是您现在拥有的占位符传递。

希望有所帮助。

在AJAX请求后更新选择选项

1 个答案: