在请求AJAX之后更新选择选项 [英] Updating select options after AJAX request

问题描述

我的选择字段如下所示:

I have select field looking like that:

<?= $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中实现?

And after that field, I have short form for adding new place - you can fill it and send AJAX request. It adds this place to my database. I would like to have my select options updated, after the AJAX request is complete - that options would be up-to-date after every new place added. How can I achieve that in Yii 2?

推荐答案

Yii 2是一个PHP框架，因此在服务器端运行.您必须在客户端的select中更改选项.查看您问题的标签，我假设您使用的是jQuery.给定一系列选项，这就是您如何在一个select中更新这些选项的方法.我假设您通过AJAX调用在这些方面有所收获.如果您的AJAX调用返回JSON，则可以使用

Yii 2 is a PHP framework and thus operates on the server side. You have to change the options in the select on the client side. Looking at the tags of your question, I assume that you are using jQuery. This is how you can update the options in a select, given an array of options. I will assume that you get something along those lines via an AJAX call. If your AJAX call returns JSON, you can get an object using 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，则可以使用以下代码.

If you are using select2 then do not forget to call $select.trigger('change') after you have updated the options. This will update the dropdown. In case you are not using jQuery at all, you can use the below code.

原始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>

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

On the server side, you only need to be sure to query your database for the options that have been stored there and pass that as the options instead of the placeholder that you have there now.

希望有帮助.

这篇关于在请求AJAX之后更新选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！