Question

我正在将Select2用于我的一个字段。数据完美插入数据库中。但是，当我要编辑表单时，需要从数据库中获取数据。我可以获取数据，但我不知道如何在编辑表单时在Select2中显示值。这是我在数据库中插入数据时的代码。表名是“ requests”，存储数组的列是“ crimes_section”。

 <div class="form-group">
   <label>Crime Section / جرم</label>
     <select class="crimeSections form-control" name="crimeSection[]" multiple="multiple" style="border-radius: 0px;" placeholder="35201-4578979-0">
         <option value="AL">Alabama</option>
         <option value="WY">Wyoming</option>
      </select>
  </div>
<script type="text/javascript">
$(document).ready(function() {
   $('.crimeSections').select2({
   placeholder: "381, 392, 420"
   });
});
</script>

Answer 1

下面假设是从数据库接收的数据。

var data = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
];

这是将数据填充到选择框中的一种方法，通过触发更改事件，您可以设置默认值。

$('#example').select2({
    data: data
}).val(1).trigger('change'); //This will set bug as selected value

Answer 2

您可以同时使用这两个选项。设置值以使用隐藏字段从数据库设置

// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('formController', ['$scope', '$http', function($scope, $http) {

  //Buttons Settings
  $scope.submit = true;


  //form data manipulate
  $scope.formData = function() {

    //$http POST function
    $http({

      method: 'POST',
      url: 'https://demoapi.com/formdata',
      data: $scope.data

    }).then(function successCallback(response) {

      alert("created Successfully")

    }, function errorCallback(response) {

      alert("Error. while created user Try Again!");

    });

  };


}]);

Answer 3

尝试

Array.from(document.querySelector('.crimeSections').options).forEach(option=>{
if(option.value=="AL")
option.selected=true
});

编辑：将“ AL”替换为您想匹配的值

Answer 4

此代码对我有用。

$(document).ready(function() {
    $('#selectedCrimes').select2({
    multiple: true,
    });
});

感谢大家。

编辑表单时如何显示从数据库中选择的值？

4 个答案: