【问题标题】:How to show selected values from database when edit the form?编辑表单时如何显示数据库中的选定值?
【发布时间】:2019-12-24 07:23:36
【问题描述】:

我将 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>

【问题讨论】:

  • 我无法理解您正在编辑的表单在哪里?你想编辑什么??

标签: javascript html jquery-select2


【解决方案1】:

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

$('#sel_users').val(value);
$('#sel_users').select2().trigger('change');

【讨论】:

  • 此字段将如何显示数据库中的选定值数据。
  • 您可以从数据库中选择值并向其中添加变量值,例如
【解决方案2】:

试试

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

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

【讨论】:

    【解决方案3】:

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

    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
    

    【讨论】:

    • 编辑页面加载时所选值将如何显示在输入字段中。我必须把这段代码放在哪里。谢谢
    • 你的问题是设置选择的值还是将数据填充到选择框中?
    【解决方案4】:

    此代码对我有用。

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

    感谢大家。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-05-07
      • 2020-11-06
      • 1970-01-01
      • 2018-12-01
      • 2016-03-06
      • 1970-01-01
      • 2019-11-25
      相关资源
      最近更新 更多